<template>
  <div class="container">
    <div class="header">
      <van-icon name="arrow-left" class="vanIcon" @click="backtrack" />
      <span>{{ title + "预约" }}</span>
      <!-- <span style="color: #1c4990;">1</span> -->
      <van-icon name="wap-home-o" class="rightIcon" @click="$router.push('/home')" />
    </div>
    <div class="main">
      <div class="start-title">
        作业信息
      </div>
      <Select
        :verify="true"
        title="申请部门"
        :options="getDeptTree"
        v-model="search.applicantDeptId"
      />
      <Select
        :verify="true"
        title="申请人"
        :options="getDeptUserTree"
        v-model="search.applicantUserId"
      />
      <Select
        :verify="true"
        title="作业区域"
        :options="getAreaTree"
        v-model="search.workTicketAreaId"
      />
      <Input :verify="true" title="作业地点" v-model="search.workTicketPlace" />
      <Input
        title="作业内容"
        :verify="true"
        v-model="search.workTicketContent"
      />
      <Time
        title="作业开始时间"
        :verify="true"
        v-model="search.workPlanStartTime"
      />
      <Time
        title="作业结束时间"
        :verify="true"
        v-model="search.workPlanEndTime"
      />
      <Input
        :verify="false"
        title="关联作业票编号"
        v-model="linkWorkTicketNo"
      />
      <FileUploader
        title="作业前置文件"
        :verify="false"
        v-model="workTicketProfiler"
      />
      <div class="start-title">
        作业人员
      </div>
      <Select
        :verify="true"
        title="作业负责人"
        :options="getDeptUserTree"
        v-model="search.workTicketDirectorId"
      />
      <Radio
        :verify="false"
        title="作业单位类型"
        :option="flatType"
        v-model="search.workTicketCompanyType"
      />
      <div>
        <Select
          v-if="search.workTicketCompanyType === '20'"
          :verify="true"
          title="作业单位"
          :options="getDeptTree"
          v-model="interiorData.workTicketCompany"
        />
        <Select
          v-if="search.workTicketCompanyType === '20'"
          title="内部监护人"
          :verify="true"
          :options="getDeptUserTree"
          v-model="interiorData.workTicketGuardianUser"
        />
        <MultipleSelect
          v-if="search.workTicketCompanyType === '20'"
          :verify="true"
          title="内部作业人员"
          :options="getDeptUserTree"
          v-model="interiorData.executeUserIdList"
        />
      </div>
      <div>
        <Select
          v-if="search.workTicketCompanyType === '10'"
          :verify="true"
          title="作业单位"
          :options="contractorList"
          v-model="contractorData.workTicketCompany"
          @filterData="filterData"
        />
        <Select
          v-if="search.workTicketCompanyType === '10'"
          title="承包商监护人"
          :verify="true"
          :options="guardianPersonnelList"
          v-model="contractorData.workTicketGuardianUser"
        />
        <MultipleSelect
          v-if="search.workTicketCompanyType === '10'"
          title="承包商作业人"
          :verify="true"
          :options="operatingPersonnelList"
          v-model="contractorData.contractorUserIdList"
        />
      </div>
      <!-- 动火 -->
      <div v-if="this.code === '10'">
        <div class="start-title">
          动火作业
        </div>
        <Radio
          :verify="true"
          title="动火级别"
          :option="levelType"
          v-model="data10.hwWorkLevel"
        />
        <Input title="动火方式" :verify="true" v-model="data10.hwWorkWay" />
        <Input
          title="动火地点及动火部位"
          :verify="true"
          v-model="data10.hwWorkLocation"
        />
      </div>
      <!-- 受限 -->
      <div v-if="this.code === '20'">
        <div class="start-title">
          受限作业
        </div>
        <Input
          title="受限空间名称"
          :verify="true"
          v-model="data20.rsWorkName"
        />
        <Input
          title="受限空间内原有介质名称"
          :verify="true"
          v-model="data20.rsWorkMediumName"
        />
      </div>
      <!-- 盲板抽堵 -->
      <div v-if="this.code === '30'">
        <div class="start-title">
          盲板抽堵
        </div>
        <Radio
          :verify="true"
          title="作业类型"
          :option="bpWorkType"
          v-model="data30.bpWorkType"
        />
        <Input
          title="设备管道名称"
          :verify="true"
          v-model="data30.bpWorkEpName"
        />
        <div class="start-title-2">
          管道参数
        </div>
        <Input title="介质" :verify="true" v-model="data30.bpWorkMedium" />
        <Input title="温度" :verify="true" v-model="data30.bpWorkTemperature" />
        <Input title="压力" :verify="true" v-model="data30.bpWorkPressure" />
        <div class="start-title-2">
          盲板参数
        </div>
        <Input title="材质" :verify="true" v-model="data30.bpWorkMaterial" />
        <Input title="规格" :verify="true" v-model="data30.bpWorkNumber" />
        <Input title="编号" :verify="true" v-model="data30.bpWorkSpec" />
        <div class="start-title-2">
          盲板位图及编号
        </div>
        <ImageUpload
          title="位图"
          :verify="true"
          v-model="data30.bpWorkImgUrl"
        />
        <Input title="编号" :verify="true" v-model="data30.bpWorkPrepared" />
      </div>
      <!-- 高处作业 -->
      <div v-if="this.code === '40'">
        <div class="start-title">
          高处作业
        </div>
        <Radio
          :verify="true"
          title="高处作业级别"
          :option="levelType"
          v-model="data40.haWorkLevel"
        />
        <Input title="作业高度" :verify="true" v-model="data40.haWorkHigh" />
      </div>
      <!-- 吊装 -->
      <div v-if="this.code === '50'">
        <div class="start-title">
          吊装作业
        </div>
        <Radio
          :verify="true"
          title="吊装作业级别"
          :option="levelType"
          v-model="data50.hoWorkLevel"
        />
        <Input
          title="吊具名称"
          :verify="true"
          v-model="data50.hoWorkSpreaderName"
        />
        <Input
          title="指挥人员"
          :verify="true"
          v-model="data50.hoWorkCommander"
        />
        <Input title="司索人" :verify="true" v-model="data50.hoWorkSolicitor" />
        <Input
          title="吊物质量"
          :verify="true"
          v-model="data50.hoWorkSuspendedObject"
        />
      </div>
      <!-- 临时 -->
      <div v-if="this.code === '60'">
        <div class="start-title">
          临时用电作业
        </div>
        <Input
          title="用电人"
          :verify="true"
          v-model="data60.teWorkElectricityUser"
        />
        <Input
          title="用电设备"
          :verify="true"
          v-model="data60.teWorkElectricityDevice"
        />
        <Input
          title="电源接入点及许可用电功率"
          :verify="true"
          v-model="data60.teWorkApEp"
        />
        <Input title="工作电压" :verify="true" v-model="data60.teWorkVoltage" />
      </div>
      <!-- 动土 -->
      <div v-if="this.code === '70'">
        <div class="start-title">
          动土作业
        </div>
        <Input title="描述" :verify="true" v-model="data70.bgWorkDescribe" />
        <ImageUpload title="简图" :verify="true" v-model="data70.bgWorkImg" />
      </div>
      <!-- 断路 -->
      <div v-if="this.code === '80'">
        <div class="start-title">
          断路作业
        </div>
        <Input
          title="相关单位"
          :verify="true"
          v-model="data80.rbWorkRelevantUnits"
        />
        <Input
          title="相关说明"
          :verify="true"
          v-model="data80.rbWorkIllustrate"
        />
        <Input title="断路原因" :verify="true" v-model="data80.rbWorkReason" />
        <ImageUpload
          title="地段示意图"
          :verify="true"
          v-model="data80.rbWorkImg"
        />
      </div>
      <van-button
        :disabled="isDisabled"
        style="margin-top: 15px;"
        type="primary"
        @click="add"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addWorkticket, editWorkticket } from '@/api/jobReservation.js'
export default {
  data () {
    return {
      code: '',
      title: '',
      isDisabled: false,
      guardianPersonnelList: [],
      operatingPersonnelList: [],
      search: {
        applicantUserId: '', // 申请人
        workTicketAreaId: '', // 作业区域
        workTicketCompanyType: '20', // 作业单位类型
        workTicketPlace: '', // 作业地点
        workTicketContent: '', // 作业内容
        applicantDeptId: '', // 申请单位
        workPlanStartTime: '', // 开始时间
        workTicketDirectorId: '',
        workPlanEndTime: '' // 结束时间
      },
      rejectReason: '', // 驳回原因
      workTicketProfiler: '', // 作业前置文件
      workTicketType: '', // 作业票类型
      linkWorkTicketNo: '', // 关联作业票号
      // 承保商
      contractorData: {
        workTicketCompany: '', // 作业单位
        contractorUserIdList: [], // 承保商作业人员
        workTicketGuardianUser: ''
      },
      // 内部
      interiorData: {
        workTicketCompany: '', // 作业单位
        executeUserIdList: [], // 内部作业人员
        workTicketGuardianUser: ''
      },
      data10: {
        hwWorkLevel: '30', // 动火作业级别
        hwWorkLocation: '', // 动火作业地点及动火部位
        hwWorkWay: '' // 动火方式
      },
      data20: {
        rsWorkMediumName: '', // 受限空间内原有介质名称
        rsWorkName: '' // 受限空间名称
      },
      data30: {
        bpWorkEpName: '', // 盲板抽堵作业-管道设备名称
        bpWorkImgUrl: '', // 盲板抽堵作业-位置图
        bpWorkMaterial: '', // 盲板抽堵作业-材质
        bpWorkMedium: '', // 盲板抽堵作业-介质
        bpWorkNumber: '', // 盲板抽堵作业-规格
        bpWorkPrepared: '', // 盲板抽堵作业-位置图编制人
        bpWorkPressure: '', // 盲板抽堵作业-压力
        bpWorkSpec: '', // 盲板抽堵作业-规格
        bpWorkTemperature: '', // 盲板抽堵作业-温度
        bpWorkType: '' // 盲板抽堵作业-类别 10抽、20堵
      },
      data40: {
        haWorkHigh: '', // 高处作业-高度
        haWorkLevel: '30' // 高处作业-级别
      },
      data50: {
        hoWorkCommander: '', // 吊装作业-指挥人员
        hoWorkLevel: '30', // 吊装作业-吊装作业级别
        hoWorkSolicitor: '', // 吊装作业-司索人
        hoWorkSpreaderName: '', // 吊装作业-吊具名称
        hoWorkSuspendedObject: '' // 吊装作业-吊物质量
      },
      data60: {
        teWorkApEp: '', // 临时用电作业-电源接入点及许可用电功率
        teWorkElectricityDevice: '', // 临时用电作业-用电设备
        teWorkElectricityUser: '', // 临时用电作业-用电人
        teWorkVoltage: '' // 临时用电作业-工作电压
      },
      data70: {
        bgWorkDescribe: '', // 动土作业-描述
        bgWorkImg: '' // 动土作业-简图
      },
      data80: {
        rbWorkIllustrate: '', // 断路作业-相关说明
        rbWorkImg: '', // 断路作业-地段示意图
        rbWorkReason: '', // 断路作业-断路原因
        rbWorkRelevantUnits: '' // 断路作业-相关单位
      },
      bpWorkType: [
        {
          name: '堵盲板',
          id: '10'
        },
        {
          name: '抽盲板',
          id: '20'
        }
      ],
      flatType: [
        {
          name: '承包商',
          id: '10'
        },
        {
          name: '内部',
          id: '20'
        }
      ],
      levelType: [
        {
          name: '特级',
          id: '10'
        },
        {
          name: '一级',
          id: '20'
        },
        {
          name: '二级',
          id: '30'
        }
      ],
      workData: {}
    }
  },
  computed: {
    ...mapState('login', ['user']),
    ...mapState('dangerList', [
      'dangerSrcList',
      'dangerTypeList',
      'getAreaTree',
      'getDeptTree',
      'getDeptUserTree',
      'contractorList',
      'contractorUserList',
      'workticketData'
    ])
  },
  watch: {
    'search.workTicketCompanyType': {
      handler (cur, old) {
        if (cur === '10') {
          this.interiorData = this.$options.data().interiorData
        } else {
          this.contractorData = this.$options.data().contractorData
        }
      }
    }
  },
  created () {
    this.code = this.$route.query.code
    this.title = this.$route.query.name
    if (this.$route.query.id) {
      this.getDetails()
    } else {
      this.search.applicantUserId = this.user.userId
      this.search.applicantDeptId = this.user.deptId
    }
  },
  mounted () {},

  methods: {
    add () {
      const workData =
        this.search.workTicketCompanyType === '10'
          ? 'contractorData'
          : 'interiorData'
      const data = `data${this.code}`
      const verify1 = this.$examine(this.search)
      const verify2 = this.$examine(this[workData])
      const verify3 = this.$examine(this[data])
      if (verify1 === true && verify2 === true && verify3 === true) {
        let params = {
          ...this.search,
          ...this[workData],
          workTicketType: this.code,
          workTicketProfiler: this.workTicketProfiler,
          workTicketExtendDTO: {
            ...this[data]
          }
        }
        this.isDisabled = true
        params = this.$route.query.id
          ? { ...params, id: this.$route.query.id }
          : params
        const request = this.$route.query.id ? editWorkticket : addWorkticket
        request(params)
          .then(({ data }) => {
            if (data.code === 200) {
              this.$notify({
                type: 'success',
                message: '作业预约成功',
                duration: 3000
              })
              this.$router.push('/home')
              this.isDisabled = false
            } else {
              this.isDisabled = false
            }
          })
          .finally(() => {
            this.isDisabled = false
          })
      } else {
        if (verify1 !== true) {
          this.search = { ...verify1[0] }
          setTimeout(() => {
            this.search = { ...verify1[1] }
          }, 100)
        }
        if (verify2 !== true) {
          this[workData] = { ...verify2[0] }
          setTimeout(() => {
            this[workData] = { ...verify2[1] }
          }, 100)
        }
        if (verify3 !== true) {
          this[data] = { ...verify3[0] }
          setTimeout(() => {
            this[data] = { ...verify3[1] }
          }, 100)
        }
      }
    },
    filterData () {
      this.guardianPersonnelList = this.contractorUserList.filter(
        item => item.value === this.contractorData.workTicketCompany
      )
      this.operatingPersonnelList = this.contractorUserList.filter(
        item => item.value === this.contractorData.workTicketCompany
      )
    },
    getObj (obj, arrKey) {
      arrKey.forEach(k => {
        const jobKes = Object.keys(this[k])
        jobKes.forEach(key => {
          this[k] = {
            ...this[k],
            [key]: obj[key]
          }
        })
      })
    },
    getDetails () {
      this.workData = JSON.parse(JSON.stringify(this.workticketData))
      const KEY1 = ['search', 'contractorData', 'interiorData']
      const KEY2 = [
        'data10',
        'data20',
        'data30',
        'data40',
        'data50',
        'data60',
        'data70',
        'data80'
      ]
      this.workTicketType = this.workData.workTicketType
      this.workTicketStatus = this.workData.workTicketStatus
      this.workTicketProfiler = this.workData.workTicketProfiler
      this.linkWorkTicketNo = this.workData.linkWorkTicketNo
      this.getObj(this.workData, KEY1)
      this.getObj(this.workData.workTicketExtendDTO, KEY2)
      this.filterData()
      this.interiorData.workTicketGuardianUser = +this.interiorData
        .workTicketGuardianUser
    },
    backtrack () {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="less" scoped>
.start-title {
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-weight: 600;
  color: #1c4990;
  border-bottom: solid 1px #eee;
  margin-bottom: 16px;
}
.start-title-2 {
  height: 30px;
  line-height: 30px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: #1c4990;
  border-bottom: solid 1px #eee;
  margin-bottom: 16px;
}
</style>
