<template>
  <div>
    <div class="job-infrom">
      <div class="item-text">
        <div class="text">
          <span>当前状态</span>
          <span><van-tag v-if="workTicketStatus" type="primary" size="large" :color="colorList[workTicketStatus]">{{ ticketStaus[workTicketStatus] }}</van-tag><div v-else>无</div></span>
        </div>
      </div>
      <div class="start-title">
        作业信息
      </div>
      <div class="item-text">
        <div class="text">
          <span>申请部门</span>
          <span>{{ $findItemById(getDeptTree, search.applicantDeptId) || "无" }}</span>
        </div>
        <div class="line"></div>
        <div class="text">
          <span>申请人</span>
          <span>{{ $findItemById(getDeptUserTree, search.applicantUserId) || "无" }}</span>
        </div>
      </div>
      <div class="item-text">
        <div class="text">
          <span>作业区域</span>
          <span>{{ $findItemById(getAreaTree, search.workTicketAreaId) || "无" }}</span>
        </div>
        <div class="line"></div>
        <div class="text">
          <span>作业地点</span>
          <span>{{ search.workTicketPlace || "无" }}</span>
        </div>
      </div>
      <div class="item-text">
        <div class="text">
          <span>作业起止时间</span>
          <span v-if="search.workPlanStartTime">{{ search.workPlanStartTime }} - {{ search.workPlanEndTime }}</span>
          <span v-else>无</span>
        </div>
      </div>
      <div class="item-text">
        <div class="text">
          <span>作业内容</span>
          <span style="color: #1c4990;">{{ search.workTicketContent || "无" }}</span>
        </div>
      </div>
      <div class="item-text">
        <div class="text">
          <span>关联作业票编号</span>
          <span>{{ search.linkWorkTicketNo || "无" }}</span>
        </div>
      </div>
      <div class="item-text">
        <div class="text">
          <span>作业前置文件</span>
          <span v-if="workTicketProfiler">
          <div class="text-file" v-for="(item, index) in workTicketProfiler" :key="index" @click="downloadFile(item.url)">{{ item.name }}</div>
          </span>
          <span v-else>无</span>
        </div>
      </div>
      <div class="start-title">
        作业人员
      </div>
      <div v-if="search.workTicketCompanyType === '20'">
        <div class="item-text">
          <div class="text">
            <span>作业单位类型</span>
            <span>{{workType(flatType, search.workTicketCompanyType)  || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>作业单位</span>
            <span>{{ $findItemById(getDeptTree, interiorData.workTicketCompany) || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>作业负责人</span>
            <span>{{ $findItemById(getDeptUserTree, interiorData.workTicketDirectorId) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>内部监护人</span>
            <span>{{ $findItemById(getDeptUserTree, interiorData.workTicketGuardianUser * 1) || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>内部作业人员</span>
            <span>{{ interiorData.executeUserIdList || "无" }}</span>
          </div>
        </div>
      </div>
      <div v-if="search.workTicketCompanyType === '10'">
        <div class="item-text">
          <div class="text">
            <span>作业单位类型</span>
            <span>{{workType(flatType, search.workTicketCompanyType)  || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>作业单位</span>
            <span>{{ $findItemById(contractorList, contractorData.workTicketCompany)  || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>作业负责人</span>
            <span>{{ $findItemById(getDeptUserTree, contractorData.workTicketDirectorId) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>承包商监护人</span>
            <span>{{ $findItemById(contractorUserList, contractorData.workTicketGuardianUser)  || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>承包商作业人</span>
            <span>{{ contractorData.contractorUserIdList || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 动火 -->
      <div v-if="this.workTicketType === '10'">
        <div class="start-title">
          动火作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>动火级别</span>
            <span>{{ workType(levelType, data10.hwWorkLevel) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>动火方式</span>
            <span>{{ data10.hwWorkWay || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>动火地点及动火部位</span>
            <span>{{ data10.hwWorkLocation || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 受限 -->
      <div v-if="this.workTicketType === '20'">
        <div class="start-title">
          受限作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>受限空间名称</span>
            <span>{{ data20.rsWorkName || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>受限空间内原有介质名称</span>
            <span>{{ data20.rsWorkMediumName || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 盲板抽堵 -->
      <div v-if="this.workTicketType === '30'">
        <div class="start-title">
          盲板抽堵
        </div>
        <div class="item-text">
          <div class="text">
            <span>作业类型</span>
            <span>{{ workType(bpWorkType, data30.bpWorkType) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>设备管道名称</span>
            <span>{{ data30.bpWorkEpName || "无" }}</span>
          </div>
        </div>
        <div class="start-title-2">
          管道参数
        </div>
        <div class="item-text">
          <div class="text">
            <span>介质</span>
            <span>{{ data30.bpWorkMedium || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>温度</span>
            <span>{{ data30.bpWorkTemperature || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>压力</span>
            <span>{{ data30.bpWorkPressure || "无" }}</span>
          </div>
        </div>
        <div class="start-title-2">
          盲板参数
        </div>
        <div class="item-text">
          <div class="text">
            <span>材质</span>
            <span>{{ data30.bpWorkMaterial || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>规格</span>
            <span>{{ data30.bpWorkNumber || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>编号</span>
            <span>{{ data30.bpWorkSpec || "无" }}</span>
          </div>
        </div>
        <div class="start-title-2">
          盲板位图及编号
        </div>
        <div class="item-text">
          <div class="text">
            <span>位图</span>
            <span style="color:#1c4990;" @click="previewPicture(data30.bpWorkImgUrl)">
              <van-icon name="photo" color="#1c4990" />共
              {{ imgNum(data30.bpWorkImgUrl) }} 张
            </span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>编号</span>
            <span>{{ data30.bpWorkPrepared || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 高处作业 -->
      <div v-if="this.workTicketType === '40'">
        <div class="start-title">
          高处作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>高处作业级别</span>
            <span>{{ workType(levelType, data40.haWorkLevel) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>作业高度</span>
            <span>{{ data40.haWorkHigh || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 吊装 -->
      <div v-if="this.workTicketType === '50'">
        <div class="start-title">
          吊装作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>吊装作业级别</span>
            <span>{{ workType(levelType, data50.hoWorkLevel) || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>吊具名称</span>
            <span>{{ data50.hoWorkSpreaderName || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>指挥人员</span>
            <span>{{ data50.hoWorkCommander || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>司索人</span>
            <span>{{ data50.hoWorkSolicitor || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>吊物质量</span>
            <span>{{ data50.hoWorkSuspendedObject || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 临时 -->
      <div v-if="this.workTicketType === '60'">
        <div class="start-title">
          临时用电作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>用电人</span>
            <span>{{ data60.teWorkElectricityUser || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>用电设备</span>
            <span>{{ data60.teWorkElectricityDevice || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>电源接入点及许可用电功率</span>
            <span>{{ data60.teWorkApEp || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>工作电压</span>
            <span>{{ data60.teWorkVoltage || "无" }}</span>
          </div>
        </div>
      </div>
      <!-- 动土 -->
      <div v-if="this.workTicketType === '70'">
        <div class="start-title">
          动土作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>描述</span>
            <span>{{ data70.bgWorkDescribe || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>简图</span>
            <span style="color:#1c4990;" @click="previewPicture(data70.bgWorkImg)">
              <van-icon name="photo" color="#1c4990" />共
              {{ imgNum(data70.bgWorkImg) }} 张
            </span>
          </div>
        </div>
      </div>
      <!-- 断路 -->
      <div v-if="this.workTicketType === '80'">
        <div class="start-title">
          断路作业
        </div>
        <div class="item-text">
          <div class="text">
            <span>相关单位</span>
            <span>{{ data80.rbWorkRelevantUnits || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>相关说明</span>
            <span>{{ data80.rbWorkIllustrate || "无" }}</span>
          </div>
        </div>
        <div class="item-text">
          <div class="text">
            <span>断路原因</span>
            <span>{{ data80.rbWorkReason || "无" }}</span>
          </div>
          <div class="line"></div>
          <div class="text">
            <span>地段示意图</span>
            <span style="color:#1c4990;" @click="previewPicture(data80.rbWorkImg)">
              <van-icon name="photo" color="#1c4990" />共
              {{ imgNum(data80.rbWorkImg) }} 张
            </span>
          </div>
        </div>
      </div>
      <!-- <div v-if="rejectReason">
        <div class="start-title">
          驳回原因
        </div>
        <div class="item-text">
          <div class="text">
            <span style="color: #000;">{{ rejectReason }}</span>
          </div>
        </div>
      </div>
      <div v-if="workTicketStatus === '0'">
        <div class="start-title">
          作业负责人审批
        </div>
        <div class="item-text">
          <div class="text">
            <div class="item-button">
              <van-button type="info" @click="passJob(2)">通过</van-button>
              <van-button type="info" @click="isShow = true">驳回</van-button>
              <van-button type="info" @click="editJob">编辑</van-button>
            </div>
          </div>
        </div>
      </div> -->
      <van-dialog
        v-model="isShow"
        style="padding: 10px;"
        show-cancel-button
        @confirm="confirm"
        title="驳回原因"
        @cancel="cancel"
      >
        <van-field
          rows="1"
          autosize
          v-model="remark"
          placeholder="请输入驳回原因"
          type="textarea"
        />
      </van-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { checkWorkTicket } from '@/api/jobReservation.js'
export default {
  nmae: 'JobInformation',
  data () {
    return {
      isShow: false,
      search: {
        applicantUserId: '', // 申请人
        linkWorkTicketNo: '', // 关联作业票号
        workTicketAreaId: '', // 作业区域
        workTicketCompanyType: '10', // 作业单位类型
        workTicketPlace: '', // 作业地点
        workTicketContent: '', // 作业内容
        applicantDeptId: '', // 申请单位
        workPlanStartTime: '', // 开始时间
        workPlanEndTime: '' // 结束时间
      },
      remark: '', // 驳回原因
      workTicketProfiler: '', // 作业前置文件
      workTicketType: '', // 作业票类型
      workTicketStatus: '',
      // 承保商
      contractorData: {
        workTicketCompany: '', // 作业单位
        contractorUserIdList: [], // 承保商作业人员
        workTicketDirectorId: '', // 作业负责人
        workTicketGuardianUser: ''
      },
      // 内部
      interiorData: {
        workTicketCompany: '', // 作业单位
        executeUserIdList: [], // 内部作业人员
        workTicketDirectorId: '', // 作业负责人
        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'
        }
      ],
      ticketStaus: {
        10: '待交底',
        20: '待接受',
        30: '审核中',
        40: '作业中',
        50: '已验收'
      },
      colorList: {
        10: '#1c4990',
        20: '#1c4990',
        30: '#1c4990',
        40: '#07c160',
        50: '#07c160'
      },
      type: [
        {
          id: '10',
          name: '动火作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '20',
          name: '受限作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '30',
          name: '盲板抽堵',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '40',
          name: '高处作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '50',
          name: '吊装作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '60',
          name: '临时用电',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '70',
          name: '动土作业',
          icon: require('@/assets/images/icon11.png')
        },
        {
          id: '80',
          name: '断路作业',
          icon: require('@/assets/images/icon11.png')
        }
      ],
      workData: {}
    }
  },
  watch: {
    '$store.state.dangerList.workticketData': {
      deep: true,
      handler: function () {
        this.getDetails()
      }
    }
  },
  computed: {
    ...mapState('baseUrl', ['baseUrl']),
    ...mapState('login', ['user']),
    ...mapState('dangerList', [
      'dangerSrcList',
      'dangerTypeList',
      'getAreaTree',
      'getDeptTree',
      'getDeptUserTree',
      'contractorList',
      'contractorUserList',
      'workticketData'
    ]),
    workType () {
      return (arr, type) => {
        const obj = arr.reduce((t, item) => {
          return {
            ...t,
            [item.id]: item.name
          }
        }, {})
        return obj[type]
      }
    },
    imgNum () {
      return (text) => text.split(',').length
    }
  },
  created () {
    console.log(this.workticketData, 'this.workticketData')
    this.getDetails()
  },
  methods: {
    confirm () {
      if (!this.remark) return Toast('请输入驳回原因！')
      this.passJob(1)
      this.isShow = false
    },
    cancel () {
      this.isShow = false
      this.remark = ''
    },
    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.profiler(this.workData.workTicketProfiler)
      this.rejectReason = this.workData.rejectReason
      this.workData.contractorUserIdList = this.userType(this.contractorUserList, this.workData.contractorUserIdList)
      this.workData.executeUserIdList = this.userType(this.getDeptUserTree, this.workData.executeUserIdList)
      this.getObj(this.workData, KEY1)
      this.getObj(this.workData.workTicketExtendDTO, KEY2)
    },
    profiler (val) {
      // 首先将值转为数组
      if (!val) return
      const arr = val.split(',')
      console.log(arr, 'arr')
      // 然后将数组转为对象数组
      return arr.map(item => {
        if (typeof item === 'string') {
          const names = item.split('/')
          item = { name: names[names.length - 1], url: item }
        }
        return item
      })
    },
    userType (user, arr) {
      if (!Array.isArray(arr)) return
      return arr.map(item => {
        return this.$findItemById(user, item)
      }).join(',')
    },
    passJob (type) {
      const params = {
        type,
        remark: this.remark,
        workTicketId: this.workticketData.id
      }
      checkWorkTicket(params).then(({ data }) => {
        if (data.code === 200) {
          this.$store.dispatch('dangerList/getWorkticketData', this.workticketData.id)
          setTimeout(() => {
            this.getDetails()
          }, 100)
          this.$notify({
            type: 'success',
            message: data.msg,
            duration: 3000
          })
        } else {
          this.$notify({
            type: 'danger',
            message: data.msg,
            duration: 1000
          })
        }
      })
    },
    previewPicture (img) {
      if (img) {
        const imageList = img.split(',').map(item => {
          return this.baseUrl + item
        })
        this.$emit('previewPicture', imageList)
      }
    },
    downloadFile (url) {
      Android.downloadFile(url)
    }
  }
}
</script>

<style lang="less" scoped>
.job-infrom {
  padding: 16px 16px 16px 0px;
  .item-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    height: auto;
    .line {
      height: inherit;
      width: 2px;
      background: #eee;
    }
    .text {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: start;
      margin-left: 16px;
      span {
        text-align: left;
      }
      > :nth-child(1) {
        color: #969799;
        margin-bottom: 6px;
        font-size: 14px;
      }
      .text-file {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        color: #1c4990;
        margin-bottom: 8px;
        width: 350px;
      }
    }
    .item-button {
      display: flex;
      justify-content: space-around;
      .van-button {
        flex: 1;
        margin-left: 10px;
      }
    }
  }
  .van-cell {
    border: solid 1px #000 !important;
    min-height: 40px;
  }
  .start-title {
    height: 30px;
    line-height: 30px;
    text-align: left;
    font-weight: 600;
    color: #1c4990;
    border-bottom: solid 1px #eee;
    margin-bottom: 16px;
    margin-left: 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;
    margin-left: 16px;
  }
}
</style>
