<template>
  <h-view id="create-equipment-info" class="public-style">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <div class="top">
            录入产品信息
            <img src="@/assets/intoApproval/close.png" @click="downNum = false">
            <!-- <span @click="downNum=false">x</span> -->
          </div>
          <div class="down-content">
            <span>请上传照片</span>
            <div v-if="!isReadOnly" class="photo" @click="pickMethod()">
              <img v-if="vehicleImg" :src="vehicleImg" alt="">
            </div>
            <div v-if="isReadOnly" class="photo">
              <img :src="vehicleImg" @click="showBigPicture(vehicleImg)">
            </div>
          </div>
          <list-item :item-height="44">
            <item>
              <div slot="name">车架号</div>
              <input slot="content" v-model="equipInfo.frame_number" :readonly="isReadOnly" placeholder="自动识别车架号">
            </item>
            <item>
              <div slot="name">发动机号</div>
              <input slot="content" v-model="equipInfo.engine" :readonly="isReadOnly" placeholder="自动识别发动机号">
            </item>
            <item>
              <div slot="name">车辆型号</div>
              <input slot="content" v-model="equipInfo.vehicle_model" :readonly="isReadOnly" placeholder="自动识别车辆型号">
            </item>
            <item>
              <div slot="name">合格证编号</div>
              <input slot="content" v-model="equipInfo.certificate_number" :readonly="isReadOnly" placeholder="自动识别合格证编号">
            </item>
            <item v-if="isReadOnly" class="date-check">
              <div slot="name">发车日期</div>
              <input slot="content" v-model="equipInfo.departure_date" readonly placeholder="请选择发车日期">
            </item>
            <item v-if="!isReadOnly" class="date-check" @click.native="showTime1('YYYY-MM-DD')">
              <div slot="name">发车日期</div>
              <input slot="content" v-model="equipInfo.departure_date" readonly placeholder="请选择发车日期">
            </item>
            <item v-if="isReadOnly" class="date-check">
              <div slot="name">开票日期</div>
              <input slot="content" v-model="equipInfo.invoice_date" readonly placeholder="请选择开票日期">
            </item>
            <item v-if="!isReadOnly" class="date-check" @click.native="showTime2('YYYY-MM-DD')">
              <div slot="name">开票日期</div>
              <input slot="content" v-model="equipInfo.invoice_date" readonly placeholder="请选择开票日期">
            </item>
            <item>
              <div slot="name" class="required">是否上牌</div>
              <input slot="content" v-model="equipInfo.register_flag_n" readonly placeholder="请选择"
                @click="showPicker('register_flag', index)">
            </item>
            <item>
              <div slot="name" class="required">是否挂靠</div>
              <input slot="content" v-model="equipInfo.associate_flag_n" readonly placeholder="请选择"
                @click="showPicker('associate_flag', index)">
            </item>
            <item>
              <div slot="name">挂靠单位全称</div>
              <input slot="content" v-model="equipInfo.associate_company" placeholder="请输入">
            </item>
            <item>
              <div slot="name" class="required">是否提供挂靠协议</div>
              <input slot="content" v-model="equipInfo.associate_agreement_n" readonly placeholder="请选择"
                @click="showPicker('associate_agreement', index)">
            </item>
            <item>
              <div slot="name" class="required">租赁物是否办理抵押</div>
              <input slot="content" v-model="equipInfo.lease_mortgage_n" readonly placeholder="请选择"
                @click="showPicker('lease_mortgage', index)">
            </item>
            <item>
              <div slot="name" class="required">GPS是否安装</div>
              <input slot="content" v-model="equipInfo.gps_flag_n" readonly placeholder="请选择"
                @click="showPicker('gps_flag', index)">
            </item>
            <item>
              <div slot="name" class="required">设备是否购买保险</div>
              <input slot="content" v-model="equipInfo.insurance_flag_n" readonly placeholder="请选择"
                @click="showPicker('insurance_flag', index)">
            </item>
            <div class="add-card-button">
              <button v-if="!isReadOnly" @click="saveRent()">保存</button>
            </div>
          </list-item>
        </div>
      </div>
    </transition>
    <h-header :proportion="[5, 1, 1]" class="bar-custom">
      <div slot="left" class="h-header-btn" @click="$routeGo()">
        <img src="@/assets/userBind/arrow.png">
        <span>设备清单</span>
      </div>
    </h-header>
    <h-content>
      <div v-if="!isReadOnly" class="top">
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>基本信息</p>
        </div>
        <span class="line" />
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>租赁信息</p>
        </div>
        <span class="line" />
        <div class="item">
          <span>3</span>
          <p>设备清单</p>
        </div>
        <span class="line" />
        <div class="item">
          <span>4</span>
          <p>附件信息</p>
        </div>
      </div>
      <div v-if="isReadOnly" class="top">
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>基本信息</p>
        </div>
        <span class="line" />
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>租赁信息</p>
        </div>
        <span class="line" />
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>设备清单</p>
        </div>
        <span class="line" />
        <div class="item">
          <img src="@/assets/contractCreate/finished.png">
          <p>附件信息</p>
        </div>
      </div>
      <div class="userInfo">设备清单</div>
      <div v-if="equipList.length > 0">
        <div v-for="(item, index) in equipList" :key="index" class="equipment"
          @click="downNum = true; getRent(item, item.project_lease_item_id);">
          <div class="left">
            <span>
              <img src="@/assets/contractStart/list.png">
            </span>
          </div>
          <div class="center">
            <span>租赁物信息</span>
            <span :class="['status', item.lease_status === 'Y' ? 'unMantain' : 'mantain',]">{{ item.lease_status === "Y" ?
              "已维护" : "待维护" }}</span>
            <p>
              产品型号
              <span>{{ item.product_code }}-{{ (index + 1) | lengthCheck }}</span>
            </p>
            <p>
              设备识别号
              <span>{{ item.contract_number }}</span>
            </p>
          </div>
          <div class="right">
            <img src="@/assets/contractStart/into.png">
          </div>
        </div>
      </div>

      <Empty v-else description="无" />
    </h-content>
    <bottom-tab class="add-box">
      <tab-button class="before" @click.native="$routeGo()">上一步</tab-button>
      <tab-button class="next" @click.native="next">下一步</tab-button>
    </bottom-tab>
    <ActionSheet v-model="picker_show" :actions="actions" :close-on-click-action="true" :closeable="false" title="请选择"
      @select="onSelect" />
  </h-view>
</template>
<script>
import CurrencyInput from '../../components/currencyInput'
import RateInput from '@/components/rateInput'
import SelectProduct from './select-product'
import { XDialog } from 'vux'
import { ActionSheet, Empty } from 'vant'
import 'vant/lib/action-sheet/style'
import 'vant/lib/empty/style'
export default {
  components: {
    CurrencyInput,
    RateInput,
    SelectProduct,
    XDialog,
    ActionSheet,
    Empty
  },
  data() {
    return {
      showHideOnBlur: false,
      downNum: false,
      calculeFlag: false,
      status: '',
      isClick: false, // false:右滑返回；true:点击按钮返回
      uploadList: [], // 附件上传
      equipList: [], // 设备清单
      equipInfo: {
        project_lease_item_id: '',
        frame_number: '',
        engine: '',
        vehicle_model: '',
        certificate_number: '',
        departure_date: '',
        invoice_date: '',
        register_flag_n: '否',
        register_flag: 'N',
        associate_flag_n: '否',
        associate_flag: 'N',
        associate_company: '',
        associate_agreement_n: '否',
        associate_agreement: 'N',
        lease_mortgage_n: '否',
        lease_mortgage: 'N',
        gps_flag_n: '否',
        gps_flag: 'N',
        insurance_flag_n: '否',
        insurance_flag: 'N',
      },
      isReadOnly: false, // 是否只读
      YesNoType: [], // 是否类型
      now_nodeName: '', // 当前点击的名称
      now_index: '', // 当前点击的位置
      picker_show: false, // 选择面板控制
      actions: [], // 选择组
      project_lease_item_id: '',
      vehicleImg: '',
    }
  },
  watch: {
    'downNum'(newVal, oldVal) {
      console.log(newVal,'~~',this.equipList,this.equipInfo);
      if (!newVal) {
        this.vehicleImg = ''
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.fromPage = window.localStorage.fromPage
      vm.status = window.localStorage.contractReadonly
      vm.getDropBox()
      vm.getEquipList()
      if (vm.fromPage === 'sale') {
        vm.fromList = false
        vm.isReadOnly = false
        vm.leaseList = []
      } else if (vm.fromPage === 'list') {
        if (window.localStorage.contractReadonly === 'true') {
          vm.isReadOnly = true
        } else {
          vm.isReadOnly = false
        }
      }
    })
  },
  methods: {
    showTime1(format) { // 发车日
      let vm = this
      let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
      let signDate = new Date(date)
      let iToDay = signDate.getDate()
      let iToMon = signDate.getMonth()
      let iToYear = signDate.getFullYear()
      let newDay = new Date(iToYear, iToMon, (iToDay + 30))
      hlsPopup.showTime({
        // nowDate: newDay.format('yyyy-MM-dd'),
        nowDate: (new Date(iToYear, iToMon, (iToDay + 30))).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          // vm.$set(vm.equipInfo, 'departure_date', date)
          vm.equipInfo.departure_date = date
          vm.$forceUpdate()
        },
      })
    },
    showTime2(format) { // 开票日
      let vm = this
      let date = window.localStorage.getItem('signDate').replace(/-/g, '/')
      let signDate = new Date(date)
      let iToDay = signDate.getDate()
      let iToMon = signDate.getMonth()
      let iToYear = signDate.getFullYear()
      let newDay = new Date(iToYear, iToMon, (iToDay + 30))
      hlsPopup.showTime({
        // nowDate: newDay.format('yyyy-MM-dd'),
        nowDate: (new Date(iToYear, iToMon, (iToDay + 30))).format('yyyy-MM-dd'),
        format: format,
        callback: (date) => {
          vm.equipInfo.invoice_date = date
          // vm.$set(vm.equipInfo, 'invoice_date', date)
          vm.$forceUpdate()
        },
      })
    },
    getEquipList() {
      let vm = this
      let url = process.env.basePath + 'prj_equip_list_query'
      let param = {
        project_id: window.localStorage.project_id,
        pagesize: 1,
        pagenum: 999,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.equipList = res.lists
          vm.$forceUpdate()
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    getRent (e, id) {
      let vm = this
      vm.equipInfo = e
      vm.equipInfo.register_flag_n = e.register_flag_n ? e.register_flag_n : '否'
      vm.equipInfo.register_flag = e.register_flag ? e.register_flag : 'N'
      vm.equipInfo.associate_flag_n = e.associate_flag_n ? e.associate_flag_n : '否'
      vm.equipInfo.associate_flag = e.associate_flag ? e.associate_flag : 'N'
      vm.equipInfo.associate_company = e.associate_company ? e.associate_company : ''
      vm.equipInfo.associate_agreement_n = e.associate_agreement_n ? e.associate_agreement_n : '否'
      vm.equipInfo.associate_agreement = e.associate_agreement ? e.associate_agreement : 'N'
      vm.equipInfo.lease_mortgage_n = e.lease_mortgage_n ? e.lease_mortgage_n : '否'
      vm.equipInfo.lease_mortgage = e.lease_mortgage ? e.lease_mortgage : 'N'
      vm.equipInfo.gps_flag_n = e.gps_flag_n ? e.gps_flag_n : '否'
      vm.equipInfo.gps_flag = e.gps_flag ? e.gps_flag : 'N'
      vm.equipInfo.insurance_flag_n = e.insurance_flag_n ? e.insurance_flag_n : '否'
      vm.equipInfo.insurance_flag = e.insurance_flag ? e.insurance_flag : 'N'
      vm.$forceUpdate()
      vm.downNum = true
      vm.project_lease_item_id = id
      vm.getImg(id)
    },
    onSelect(value) {
      let val = value.name
      this.equipInfo[this.now_nodeName + '_n'] = val
      let arr = this.YesNoType.filter(item => item.code_name === val)
      this.equipInfo[this.now_nodeName] = arr[0].code
    },
    showPicker(flag, index) {
      // console.log(this.flag);
      if (this.flag) return
      this.now_nodeName = flag
      this.actions = this.YesNoType.map(item => ({ name: item.code_name }))
      this.picker_show = true
      this.now_index = index
    },
    // 下拉框数据获取
    async getDropBox() {
      let url = process.env.basePath + 'app_get_syscode'
      let param = {
        'YES_NO': 'YES_NO',

      }

      hlsPopup.showLoading('请稍候')
      let res = await this.$post(url, param)
      this.hlsPopup.hideLoading()
      if (res.return_status === 'S') {
        this.YesNoType = res.YES_NO
      }
    },

    // 查看大图
    showBigPicture(pic) {
      let vm = this
      vm.hlsPopup.showBigPicture({
        imgUrl: pic,
        width: '100%',
      })
    },
    saveRent() {
      let url = process.env.basePath + 'prj_leases_info_save'
      console.log(this.equipInfo);
      if (!this.equipInfo.register_flag_n) {
        hlsPopup.showLongCenter('是否上牌不能为空！')
      } else if (!this.equipInfo.associate_flag_n) {
        hlsPopup.showLongCenter('是否挂靠不能为空！')
      }
      // else if (!this.equipInfo.associate_company) {
      //   hlsPopup.showLongCenter('挂靠单位全称不能为空！')
      // }
      else if (!this.equipInfo.associate_agreement_n) {
        hlsPopup.showLongCenter('是否提供挂靠协议不能为空！')
      } else if (!this.equipInfo.lease_mortgage_n) {
        hlsPopup.showLongCenter('租赁物是否办理抵押不能为空！')
      } else if (!this.equipInfo.gps_flag_n) {
        hlsPopup.showLongCenter('GPS是否安装不能为空！')
      } else if (!this.equipInfo.insurance_flag_n) {
        hlsPopup.showLongCenter('设备是否购买保险不能为空！')
      } else {
        let param = {
          master: {
            project_lease_item_id: this.project_lease_item_id,
            project_id: window.localStorage.project_id,
            frame_number: this.equipInfo.frame_number,
            engine: this.equipInfo.engine,
            vehicle_model: this.equipInfo.vehicle_model,
            certificate_number: this.equipInfo.certificate_number,
            departure_date: this.equipInfo.departure_date,
            invoice_date: this.equipInfo.invoice_date,
            register_flag_n: this.equipInfo.register_flag_n,
            register_flag: this.equipInfo.register_flag,
            associate_flag_n: this.equipInfo.associate_flag_n,
            associate_flag: this.equipInfo.associate_flag,
            associate_company: this.equipInfo.associate_company,
            associate_agreement_n: this.equipInfo.associate_agreement_n,
            associate_agreement: this.equipInfo.associate_agreement,
            lease_mortgage_n: this.equipInfo.lease_mortgage_n,
            lease_mortgage: this.equipInfo.lease_mortgage,
            gps_flag_n: this.equipInfo.gps_flag_n,
            gps_flag: this.equipInfo.gps_flag,
            insurance_flag_n: this.equipInfo.insurance_flag_n,
            insurance_flag: this.equipInfo.insurance_flag,
          },
        }
        this.$post(url, param).then((res) => {
          this.hlsPopup.hideLoading()
          if (res.result === 'S') {
            hlsPopup.showLongCenter('保存成功')
            this.downNum = false
            this.project_lease_item_id = res.master.project_lease_item_id
            this.equipInfo.project_lease_item_id = res.master.project_lease_item_id
            if (this.uploadList.length > 0) {
              this.uploadList[0].pkvalue = this.project_lease_item_id
              this.uploadList[0].check_id = this.project_lease_item_id
            }
            this.savePicture(this.uploadList)
            let ifPush = true
            this.leaseList.forEach(item => {
              if (item.project_lease_item_id === res.master.project_lease_item_id) {
                ifPush = false
              }
            })
            if (ifPush) {
              this.leaseList.push(this.equipInfo)
            }
            this.getEquipList()
          } else {
            hlsPopup.showLongCenter(res.message)
          }
        })
      }
    },
    // 选择识别类型
    pickMethod() {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择证件类型',
        buttonArray: ['徐工重型合格证', '车辆登记证', '出厂合格证'],
        callback: index => {
          if (index === 0) {
            vm.certificationType = 'NORMAL'
            vm.ocrShow()
          } else if (index === 1) {
            vm.certificationType = 'DAOLU'
            vm.ocrShow()
          } else if (index === 2) {
            vm.certificationType = 'CHANYUN'
            vm.ocrShow()
          }
        },
      })
    },
    // ocr识别入口
    ocrShow() {
      let vm = this
      hlsPopup.showActionSheet({
        titleText: '请选择照片',
        buttonArray: ['拍照', '从相册取'],
        callback: index => {
          if (index === 0) {
            vm.openCamera()
          } else {
            vm.takePicture()
          }
        },
      })
    },
    openCamera() {
      let vm = this
      let cameraoptions = {
        quality: 60,
        width: 1843,
        height: 1382,
      }
      let obj = {
        pkvalue: vm.project_lease_item_id,
        source_type: 'PRJ_PROJECT_LEASE_ITEM',
        filePath: '',
        attachment_id: '',
        check_id: vm.project_lease_item_id,
        user_id: 1,
        fileName: '合格证',
      }
      let success = function (imgdata) {
        if (!imgdata) {
          hlsPopup.showLongCenter('请拍照')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgdata)
          vm.vehicleIdentify(imgdata)
          obj.filePath = imgdata
          vm.uploadList = []
          vm.uploadList.push(imgdata)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      hlsUtil.openCamera(cameraoptions, success, error)
    },
    takePicture() {
      let vm = this
      var cameraoptions = {
        quality: 70,
        width: 1843,
        height: 1382,
        maxCount: 1,
      }
      let obj = {
        pkvalue: vm.project_lease_item_id,
        source_type: 'PRJ_PROJECT_LEASE_ITEM',
        filePath: '',
        attachment_id: '',
        user_id: 1,
        check_id: vm.project_lease_item_id,
        fileName: '合格证',
      }
      let success = function (imgUrl) {
        if (imgUrl.length === 0) {
          hlsPopup.showLongCenter('请选择一张图片')
        } else {
          vm.isUpload = true
          vm.vehicleImg = hlsUtil.convertImageUrl(imgUrl[0])
          obj.filePath = imgUrl[0]
          vm.vehicleIdentify(imgUrl[0])
          vm.uploadList = []
          vm.uploadList.push(obj)
        }
      }
      let error = function () {
        hlsPopup.showLongCenter(error)
      }
      vm.hlsUtil.takePicture(cameraoptions, success, error)
    },
    // 合格证识别
    vehicleIdentify(fileUrl) {
      let vm = this
      hlsPopup.showLoading('正在识别...')
      let url
      if (vm.certificationType === 'NORMAL') {
        url = process.env.ocrPath + '/baidu/ocr/vehicle_certificate'
      } else if (vm.certificationType === 'CHANYUN') {
        url = process.env.ocrPath + '/baidu/ocr/chanyun'
      } else if (vm.certificationType === 'DAOLU') {
        url = process.env.ocrPath + '/baidu/ocr/daolu'
      }
      console.log('OCR识别URL：' + url)
      hlsUtil.baiduOcr(fileUrl, url, function (res) {
        hlsPopup.hideLoading()
        console.log('OCR识别结果：' + JSON.stringify(res))
        if (vm.certificationType === 'NORMAL') {
          let result = res.result.words_result
          vm.equipInfo.frame_number = result.VinNo // 车架号
          vm.equipInfo.engine = result.EngineNo // 发动机号
          vm.equipInfo.vehicle_model = result.CarModel // 车辆型号
          vm.equipInfo.certificate_number = result.CertificationNo // 合格证编号
        } else if (vm.certificationType === 'DAOLU') {
          let result = res.result.data
          vm.equipInfo.frame_number = result.vehicle_number.word // 车架号
          vm.equipInfo.engine = result.engine_number.word // 发动机号
          vm.equipInfo.vehicle_model = result.car_model.word // 车辆型号
          vm.equipInfo.certificate_number = ''
        } else if (vm.certificationType === 'CHANYUN') {
          let result = res.result.data
          vm.equipInfo.frame_number = result.vehicle_number.word // 车架号
          vm.equipInfo.engine = result.engine_number.word // 发动机号
          vm.equipInfo.vehicle_model = result.car_type.word // 车辆型号
          vm.equipInfo.certificate_number = result.vechicle_ok_no.word
        }
        vm.$forceUpdate()
        vm.equipInfo.project_lease_item_id = ''
        vm.equipInfo.departure_date = ''
        vm.equipInfo.invoice_date = ''
      })
    },
    // 图片保存
    savePicture(list) {
      // let vm = this
      if (list.length) {
        // hlsPopup.showLoading('图片上传请稍候')
        var alreadyUploadNum = 0
        var attLength = 0
        var recordUploadInterval = setInterval(function () {
          if (alreadyUploadNum === attLength) {
            clearInterval(recordUploadInterval)
            hlsPopup.hideLoading()
            // hlsPopup.showLongCenter('图片上传成功')
          }
        }, 500)
        for (var i = 0; i < list.length; i++) {
          let uploadSuccess = function (res) {
            if (res.result === 'S') {
              alreadyUploadNum++
              for (var j = 0; j < list.length; j++) {
                if (list[j].filePath === res.response.filePath) {
                  list[j].attachment_id = res.response.attachment_id
                  break
                }
              }
            } else {
              hlsPopup.hideLoading()
            }
          }
          if (!list[i].attachment_id) {
            attLength++
            hlsUtil.fileUploadSvc(list[i], uploadSuccess)
          }
        }
      } else {
        hlsPopup.hideLoading()
      }
    },
    getImg(id) {
      // 获取合格证
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'app_attment_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        master: {
          source_type: 'PRJ_PROJECT_LEASE_ITEM',
          pkvalue: id,
        },
      }
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          if (res.info) {
            vm.vehicleImg =
              process.env.filePath +
              'attachment_id=' +
              res.info.attachment_id +
              '&access_token=' +
              window.localStorage.access_token
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    // routeGoCustomClick() {
    //   if (this.fromPage === 'sale') {
    //     this.isClick = true
    //     // this.routeGoCustom()
    //     vm.$routeGo()
    //   } else {
    //     this.$routeGo()
    //   }
    // },
    // 自定义返回逻辑：第一次新建时返回判断是否保存数据，未保存提示保存
    // routeGoCustom() {
    //   let vm = this
    //   if (vm.fromPage === 'sale' && !vm.saveTed) {
    //     hlsPopup.showConfirm({
    //       title: '提示',
    //       content: '当前页面数据未保存，返回会导致数据丢失，是否保存？',
    //       onConfirm: function (index) {
    //         if (index === 1) {
    //           vm.saveBack()
    //         } else {
    //           vm.$routeGo()
    //         }
    //       },
    //     })
    //   } else {
    //     vm.$routeGo()
    //   }
    // },
    next() {
      let vm = this
      vm.$router.push({
        name: 'CreateEnclosureInfo',
      })
    },
  }
  ,
}
</script>
<style lang="less">
.feibox {
  color: #333;
}

.feibox>p {
  color: #b3aeae;
  border-bottom: 1px solid #ccc;
  width: 85%;
  margin: 0 auto 10px;
  padding: 10px 0;
  font-size: 15px;
}

.feibox>div {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 15px 13px;
}

.gray {
  color: #b3aeae;
}

#create-equipment-info {
  .swipeout-list .option-item .delete {
    background-color: rgba(249, 98, 104, 0.5);
    background-image: url("../../assets/contractCreate/delete.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 30px 30px;
    height: 61px !important;
  }

  .swipeout-list .item .function {
    background: url("../../assets/contractCreate/delete.png") 45% 45% #fde5e8 no-repeat;
    background-size: 20px 20px;
  }

  .check {
    span {
      width: 0.32rem;
      height: 0.32rem;
      border: 0.02rem solid #1d3fff;
      border-radius: 0.06rem;
    }

    img {
      width: 16px;
    }
  }

  .mySlider {
    height: 68px;
    padding: 0;
  }

  .addRentBtn {
    text-align: center;
    height: 40px;
    line-height: 40px;
    color: #1D3FFF;
  }

  input {
    color: #333;
  }

  input::placeholder {
    color: #666;
  }

  .flow {
    z-index: 999;
  }

  .hls-list-item {
    margin-bottom: 0px !important;
  }

  .h-header-right {
    display: flex;
    align-items: center;
  }

  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;

    .down {
      position: relative;
      width: 314px;
      height: 516px;
      z-index: 999;
      background-size: 301px 24.7px;
      background-color: #fff;
      overflow-y: auto;
    }

    .top {
      width: 100%;
      height: 44px;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      letter-spacing: 0;
      text-align: center;
      line-height: 44px;
      color: #fff;
      background: #0041c4;

      img {
        width: 16px;
        height: 16px;
        position: absolute;
        right: 4vw;
      }
    }

    .down-content {
      margin-top: 8px;

      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #656464;
        letter-spacing: 0;
        margin-left: 15px;
      }

      .photo {
        width: 172px;
        height: 120px;
        border: 1px solid #dcdcdd;
        border-radius: 2px;
        margin: 0 auto;
        margin-top: 12px;
        background: url("../../assets/contractStart/photo.png") 70px no-repeat;
        background-size: 24px 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    button {
      width: 240px;
      height: 40px;
      position: absolute;
      color: #fff;
      bottom: 10px;
      left: 30.5px;
      background-color: #0041c4;
      border-radius: 4px;
    }

    .add-card-button {
      width: 100%;
      display: flex;
      justify-content: center;
      margin: 2vh 0;

      button {
        position: static;
      }
    }
  }

  .equipment {
    width: 359px;
    // height: 72px;
    background-color: #fff;
    margin: 0 auto;
    display: flex;

    .deleteBtn {
      color: #1D3FFF;
      flex: 1;
      display: flex;
      align-items: center;
      z-index: 100;
    }

    .left {
      flex: 1;
      box-align: center;
      align-items: center;
      padding: 15px 0;

      span {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #e8e9ed;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10px;
        margin-top: 8px;

        img {
          width: 11px;
          height: 14px;
        }
      }
    }

    .center {
      flex: 6;
      box-align: center;
      align-items: center;
      padding: 15px 0;
      overflow: hidden;

      span:first-child {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        letter-spacing: 0.43px;
        margin-left: 10px;
        margin-top: 12px;
        overflow: hidden;
      }

      .status {
        display: inline-block;
        width: 46px;
        height: 16px;
        text-align: center;
        line-height: 16px;
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 0;
        margin-left: 21px;
        margin-top: 12px;
      }

      .unMantain {
        background-color: #1d3fff;
      }

      .mantain {
        background-color: #fff;
        border: 1px solid #1d3fff;
        color: #1d3fff;
      }

      p {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56, 63, 69, 0.6);
        letter-spacing: 0.4px;
        margin-left: 10px;
        margin-top: 10px;
        white-space: nowrap;
        overflow: hidden;

        span {
          font-family: Helvetica;
          font-size: 13px;
          color: rgba(56, 63, 69, 0.6);
          overflow: hidden;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      align-items: center;

      img {
        width: 13px;
        height: 13px;
      }
    }
  }

  #businuss-list {
    .search {
      background-color: #fff;
      padding: 8px 12px;
      width: 100%;
      height: 1.02rem;
      z-index: 100;
      margin-bottom: 8px;

      input {
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        padding-left: 12px;
        height: 36px;
        line-height: 36px;
        border-radius: 4px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888c8f;
      }

      input::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888c8f;
        letter-spacing: 0;
      }

      input:focus {
        background: url("../../assets/contractStart/search2.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        border: 2px solid #bcc6ff;
      }
    }

    .descript {
      width: 100%;
      height: 44px;
      display: flex;
      flex-direction: row;
      background: #fff;

      img {
        width: 30px;
        height: 30px;
        margin-left: 10px;
        margin-top: 8px;
        // margin-right: 8px;
      }

      .linkPic {
        width: 16px;
        height: 16px;
        margin-top: 15px;
        margin-left: -7px;
        margin-right: 10px;
      }

      .produc {
        height: 44px;
        display: flex;
        flex: 1;
        font-size: 15px;
        color: #4b4a4b;
        line-height: 44px;
        font-weight: 500;
        letter-spacing: 0;
        margin-left: 10px;
        font-family: PingFangSC-Semibold;
        border-bottom: 1px solid #f3f3f7;
      }
    }

    .tario {
      width: 100%;
      height: 60px;
      position: relative;
      background: #fff;

      // margin-bottom: 8px;
      .wrap:nth-of-type(1) {
        height: 60px;
        position: absolute;
        left: 50px;
      }

      .wrap:nth-of-type(2) {
        height: 60px;
        position: absolute;
        right: 30px;
      }

      p {
        height: 30px;
        line-height: 30px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: rgba(56, 63, 69, 0.6);

        span:nth-of-type(2) {
          margin-left: 16px;
          color: rgb(56, 63, 69);
        }
      }
    }
  }

  .date-check {
    // background: url("../../assets/trial/date.png") 350px no-repeat;
    // background-size: 16px 16px;
    // input{
    //   margin-right:16px;
    // }
  }

  .hint-info {
    width: 100%;
    height: 36px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #fcc800;
    letter-spacing: 0.5px;
    background-color: #faf5e0;
    display: flex;
    align-items: center;

    img {
      width: 16px;
      height: 16px;
      margin-left: 17px;
      margin-right: 17px;
    }
  }

  .add-box {
    .before {
      border: 1px solid #fdb62f;
      border-radius: 4px;
      color: #fdb62f;
    }

    .next {
      background: #1d3fff;
      border-radius: 4px;
      color: #fff;
    }
  }

  .userInfo：first-of-type {
    margin-top: 10px;
  }

  .userInfo {
    height: 40px;
    line-height: 40px;
    color: @headerColor;
    // margin-top: -10px;
    font-size: 15px;
    margin-left: 16px;
    position: relative;

    img:nth-of-type(1) {
      float: right;
      position: relative;
      top: 10px;
      width: 19px;
      margin-right: 10px;
    }
  }

  .userInfo>.fei-button {
    float: right;
    margin-right: 10px;
    margin-top: 7.5px;
    background-color: #1D3FFF;
    color: #fff;
    height: 25px;
    line-height: 25px;
    padding: 0 8px;
    border-radius: 15px;
    font-size: 13px;
  }

  .userInfo::before {
    content: "";
    display: block;
    width: 4px;
    height: 20px;
    background-color: @headerColor;
    position: absolute;
    left: -15px;
    top: 12px;
  }

  .top {
    width: 100%;
    height: 81px;
    background-color: #faf5e0;
    display: flex;
    justify-content: center;
    align-items: center;

    .line {
      display: inline-block;
      width: 78px;
      border-top: 1px solid #a4a4a4;
      margin-bottom: 18px;
    }

    .line:nth-of-type(1) {
      border-top: 1px solid #ffa000;
    }

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
      font-family: PingFangSC-Semibold;
      font-size: 12px;
      color: rgba(56, 63, 69, 0.5);
      letter-spacing: 0.43px;

      img {
        width: 18px;
      }

      span {
        display: block;
        text-align: center;
        line-height: 18px;
        border-radius: 50%;
        width: 18px;
        height: 18px;
        color: #fff;
        background: #a4a4a4;
      }

      p {
        margin-top: 10px;
        width: 9vw;
        text-align: center;
      }
    }

    .item:nth-of-type(3) {
      font-family: PingFangSC-Semibold;
      font-size: 12px;
      color: #383f45;
      letter-spacing: 0.43px;

      span {
        background-color: #ffa000;
      }
    }
  }
}</style>
