<!--
   *@description: 工程历史详情
   *@author: yh Fu
   *@date: 2024-1-8 10:04:23
   *@version: V1.0.5
-->

<template>
  <div style="width: 100%;height: 100%;">
    <el-dialog
    :visible.sync="dialogVisible"
    title=""
    width="60%"
    append-to-body
    custom-class="ConstructionDetailsDialog">
    <el-tabs type="card" v-model="activeNames" @tab-click="viewSource" class="projectTabs">
      <el-tab-pane
        :label="e.label"
        :name="e.value"
        v-for="(e,idx) in currentDicts"
        :key="idx"
      >
        <el-collapse
          class="rmOldPie"
          v-for="(e,idx) in currentCollapses"
          :key="idx"
        >
          <el-collapse-item :name="idx">
            <template slot="title">
              <div style="display: flex;width: 100%;height: 100%;">
                <div
                  style="width: 15px;height: 15px;margin: auto 10px;border-radius: 73%;background-color: #a3d3ff;box-shadow: 1px 1px rgb(131 131 131 / 62%);">
                </div>
                <h2 style="margin-left: 1%;font-weight: 700;">{{ e.updateTime }}</h2>
              </div>
            </template>
            <!--  人员信息 -->
            <div class="personInfo">
              <span>负责人：{{ e.headName }} </span>
              <span>负责人电话：{{
                  e.headPhone === undefined || e.headPhone === null || e.headPhone === '' ? '无' : e.headPhone
                }}</span>
              <span>施工人：{{ e.constructUser }}</span>
              <span>施工人电话：{{
                  e.constructPhone === undefined || e.constructPhone === null || e.constructPhone === '' ? '无' : e.constructPhone
                  }}</span>
            </div>
            <hr>
            <!--  用料明细 -->
            <div
                v-for="(i,index) in e.zEngineeringMaterialBo || [] "
                :key="index"
              >
                <el-form :model="nodeInfo" class="nodeForm materialForm">
                    <el-form-item
                      :prop="i.materialQuality"
                      :class="enginType != '基建工程' && enginType != '民用工程' ? 'labelWidth' : '' "
                      label="材质"
                      v-show="i.materialQuality != null"
                      label-width="95px"
                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select  v-model="i.materialQuality" placeholder="请选择材质" style="width: 100%" @change="getEnginSpecificationsList(i, index,idx)" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in materialQualityList"
                          :key="e.id"
                          :label="e.name"
                          :value="e.id"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.specifications"
                      :class="enginType != '基建工程' && enginType != '民用工程' ? 'labelWidth' : '' "
                      label="规格"
                      v-show="i.specifications != null"
                      label-width="95px"

                      >
                      <el-select v-model="i.specifications" placeholder="请选择规格" style="width: 100%" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in specificationsList"
                          :key="e.id"
                          :label="e.name"
                          :value="e.id"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.number + ''"
                      :class="enginType != '基建工程' && enginType != '民用工程' ? 'labelWidth' : '' "
                      label="数量"
                      v-show="i.number != null"
                      label-width="95px"
                      >
                      <div class="block" style="display: inline-block; margin-right: 20px;">
                        <el-input v-model="i.number" placeholder="请输入数量" style="width: 100%" type="number" maxlength="11" :disabled="status == 'read-only'"></el-input>
                      </div>
                    </el-form-item>
                    <el-form-item
                      :prop="i.remark + ''"
                      :class="enginType != '基建工程' && enginType != '民用工程' ? 'labelWidth' : '' "
                      label="描述"
                      v-show="i.remark != null"
                      >
                      <div class="block" style="display: inline-block; margin-right: 20px;">
                        <el-input v-model="i.remark" placeholder="请输入" style="width: 100%"  maxlength="100" :disabled="status == 'read-only'"></el-input>
                      </div>
                    </el-form-item>

                    <el-form-item
                      :prop="i.corrosionLevel"
                      label="腐蚀等级"
                      v-show="i.corrosionLevel != null"
                      label-width="95px"

                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.corrosionLevel" placeholder="请选择腐蚀等级" style="width: 100%" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in corrosionLevelList"
                          :key="e.dictValue"
                          :label="e.dictLabel"
                          :value="e.dictValue"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.visitType"
                      label="上门类型"
                      v-show="i.visitType != null"
                      label-width="95px"

                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.visitType" placeholder="请选择上门类型" style="width: 100%" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in dict.type.visit_type"
                          :key="e.value"
                          :label="e.label"
                          :value="e.value"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item
                      :prop="i.selfClosingValveType"
                      label="自闭阀类型"
                      v-show="i.selfClosingValveType != null"
                      label-width="95px"
                      >
                      <!--                  :rules="{required: true, message: '请输入材质', trigger: 'blur'}"-->
                      <!--                  <el-input v-model="item.materialQuality" placeholder="请输入材质" style="width: 100%"/>-->
                      <el-select v-model="i.selfClosingValveType" placeholder="请选择自闭阀类型" style="width: 100%" :disabled="status == 'read-only' ">
                          <el-option
                          v-for="e in dict.type.self_closing_valve_type"
                          :key="e.value"
                          :label="e.label"
                          :value="e.value"
                          ></el-option>
                      </el-select>
                    </el-form-item>
                </el-form>
                <!-- <el-input size="mini" v-if="i.brand" style="width: 80%" v-model="i.brand" placeholder="请输入品牌">
                  <template slot="prepend">品牌</template>
                </el-input>
                <el-input v-if="i.visitType" size="mini" v-model="i.visitType" placeholder="请输入品牌">
                  <template slot="prepend">上门类型</template>
                </el-input>
                <el-input size="mini" v-if="i.corrosionLevel" v-model="i.corrosionLevel" placeholder="请输入品牌">
                  <template slot="prepend">腐蚀等级</template>
                </el-input>
                <el-input size="mini" v-if="i.selfClosingValveType" v-model="i.selfClosingValveType"
                          placeholder="请输入品牌">
                  <template slot="prepend">自闭阀类型</template>
                </el-input> -->
            </div>
            <!-- <el-form-item label="照片" prop="zEngiineeringPhotoBoList" class="obsImage"> -->
              <div style="display: flex;width: 100%;height: 100%;">
                <h3 style="width: 95px;font-weight: 600;text-align: center;text-indent: 41px;">图片</h3>
                <ObsImageUpload
                  :class=" status == 'read-only' ? 'obsImageUploads' : '' "
                  ref="obsImageUpload"
                  :limit="11"
                  :fileType="['png', 'jpg', 'jpeg']"
                  @input="getUrl(arguments,idx)"
                  :value="e.zEngiineeringPhotoBoList"
                  :disabled="status == 'read-only' "
                ></ObsImageUpload>
              </div>

            <!-- </el-form-item> -->
            <hr>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-button class="check" plain type="danger" @click="checkWorking" v-show="currentStatus == 'check' && reviewStatus && isChecking " style="width: 80px;" :disabled="currentCollapses.length == 0">审核</el-button>
      <el-button class="check" plain type="danger" @click="updateNodeOption" style="width: 94px;cursor: pointer;" v-if="currentStatus != 'check' && status != 'read-only'  ">修改</el-button>
    </el-tabs>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog
      title="审核"
      :visible.sync="checkingVisible"
      width="30%"
      class="checkingDialog"
      :before-close="null">
      <el-form :model="checkingInfo" ref="checking" class="nodeForm">
        <el-form-item
          label-width="70px"
          label="审核状态"
          >
          <el-select v-model="checkingInfo.reviewStatus" placeholder="请选择审核状态" style="width: 100%" label="审核状态">
              <el-option
              v-for="e in reviewStatusList"
              :key="e.label"
              :label="e.label"
              :value="e.value"
              ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label-width="70px"
          label="审核内容"
          >
          <div class="block" style="display: inline-block; margin-right: 20px;">
              <el-input
                v-model="checkingInfo.reviewContent"
                placeholder="请输入审核内容"
                type="textarea"
                style="width: 100%"/>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkingVisible = false">取 消</el-button>
        <el-button type="primary" @click=checkingSubmit>确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import {
    getEnginMaterialQualityList,                    // 材质
    getEnginSpecificationsList,                     // 规格
    getDictType,                                    // 腐蚀程度

} from '@/api/zdsz/enginee'
export default {
  name: 'ConstructionDetails',
  dicts:[
      'visit_type',
      'self_closing_valve_type',

  ],
  props: ['currentCollapses','nodeDetailType','enginType','status','zEngineeringNodeBo'],
  data() {
    return {
      currentDicts: [],              // 当前类型工程节点项
      dialogVisible: false,
      activeNames: '',
      reviewStatusList:[
        {
          value:'1',
          label:'通过'
        },
        {
          value:'0',
          label:'不通过'
        }
      ],                                          // 审核状态option
      corrosionLevelList:[],                      // 腐蚀等级option
      materialQualityList:[],                     // 材质
      specificationsList:[],                      // 规格
      materialComponList:[],
      nodeInfo:{
          backfillTime:'',                        // 回填时间
          constructTime:'',
          constructAccordingDrawings:'',
          segmentedCompressionQualified:'',
          zEngiineeringPhotoBoList:[],            // 照片集合
          zEngineeringMaterialBo:[],              // 用料集合
          remark:'',
      },
      checkingInfo:{
        reviewStatus:'',               // 审核状态
        reviewContent:'',              // 审核内容
        engInfoId:'',                  // 节点Id
        createTime:'',                 // 工程创建时间
      },
      currentStatus:null,
      checkingVisible:null,
      isChecking:true,
      currentEnginId:null,
      reviewStatus:null,
    }
  },
  created(){
      // 获取材质
      getEnginMaterialQualityList({enginType:this.enginType}).then(res => {
          console.log('材质',res)
          this.materialQualityList = res.data
      })
      // 获取腐蚀等级
      getDictType({dictType:'corrosion_level'}).then(res => {
          console.log('腐蚀等级',res)
          this.corrosionLevelList = res.data
      })

  },
  mounted() {
  },
  computed:{

  },
  watch: {
    // 此处监听variable变量，当期有变化时执行
    currentDicts(item1, item2) {
      // item1为新值，item2为旧值
      console.log('item1为新值，item2为旧值', item1[0].value)
      this.activeNames = item1[0].value
      this.$parent.viewNodeSource(item1[0].value)
    },
    currentCollapses(){
      try {
        this.currentCollapses[0].zEngineeringReviewBo.reviewStatus != 1 ? this.isChecking = true : false
      } catch (error) {
        this.isChecking = true
      }
      console.log('isChecking',this.isChecking)
      let materialQuality = []
      try {
        materialQuality = this.currentCollapses[0].zEngineeringMaterialBo[0].materialQuality
      } catch (error) {
        materialQuality = []
      }
      try {
        this.reviewStatus = this.currentCollapses[0].zEngineeringReviewBo.reviewStatus != '1' ? true : false
      } catch (error) {
        this.reviewStatus = true
      }
      console.log(flag)
      if(materialQuality){
        getEnginSpecificationsList({materId:materialQuality}).then(res => {
          console.log('规格',res.data)
          this.specificationsList = res.data
        })
      }
    }
  },
  methods: {
    // 保存节点Id
    setEngineId(e){
      this.currentEnginId = e
    },
    // 提交审核
    checkingSubmit(){
      try {
        this.checkingInfo.engInfoId = this.currentEnginId
        this.$emit('checkWorking',this.checkingInfo)
      } catch (error) {
        this.checkingInfo.engInfoId = null
      }
      this.dialogVisible = false
      this.checkingVisible = false
      this.checkingInfo = {
        reviewStatus:'',               // 审核状态
        reviewContent:'',              // 审核内容
        engInfoId:'',                  // 节点Id
        createTime:'',                 // 工程创建时间
      }
    },
    // 查看单节点历史
    viewSource(e) {
      console.log('节点',e)
      this.$parent.viewNodeSource(e.name)
    },
    // 单项审核
    checkWorking() {
      if(this.currentStatus == 'check'){
        this.checkingVisible = true
      }
    },
    updateNodeOption(){
      console.log(this.activeNames)
      console.log('最新面板',this.currentCollapses)
      this.$emit('updateNodeOption',this.currentCollapses)
    },
    // 查看历史
    open(dicts, type = null,currentStatus = null,kind = null) {
      this.currentStatus = currentStatus
      this.checkingVisible = false
      console.log(this.reviewStatus,this.currentStatus,this.isChecking)
      if (type == '1' || type == '2') {
        // 工业 市政
        this.$parent.viewNodeSource()
        this.currentDicts = [
          {
            value: "历史数据",
            label: "历史数据"
          }
        ]
      } else if (type === '危险作业工程') {
        this.$parent.viewNodeSource()
        this.currentDicts = [
          {
            value: "历史数据",
            label: "历史数据"
          }
        ]
      } else {
        console.log(dicts)
        this.dialogVisible = true
        if (type=='check'&&kind=='基建'){
          dicts=dicts.filter(item=>['水电施工','防水'].includes(item.value))
        }
        this.currentDicts = dicts
      }

      this.dialogVisible = true
    },
    // 获取材质规格
    getEnginSpecificationsList(e,idx,parentIndex){
      // 重置规格
      this.currentCollapses[parentIndex].zEngineeringMaterialBo[idx].specifications = ''
        getEnginSpecificationsList({materId:e.materialQuality}).then(res => {
            console.log('规格',res.data)
            this.specificationsList = res.data
        })
    },
    getUrl(_,idx) {
      this.currentCollapses[idx].zEngiineeringPhotoBoList = [...arguments][0][0].map(e=>e.url) || [];
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .nodeForm{
  .el-form-item__content{
    display: flex;
  }
}

::v-deep .materialForm{
  display: flex !important;
  flex-wrap: wrap;
  .el-form-item{
    width: 320px;
  }
}
::v-deep .obsImageUpload{
  .el-upload--picture-card{
    display: block !important;
  }
}
::v-deep .obsImageUpload >div{
  display: flex;
}
::v-deep .el-dialog {
  height: 85%;

  .el-dialog__body {
    overflow: hidden;
    height: 94%;
  }
}

::v-deep .el-upload-notShow{
  .el-upload--picture-card {
    display: none;
  }
}

::v-deep .labelWidth{
  .el-form-item__label{
    width: 100px;
  }
}

::v-deep .obsImageUploads{
  .el-upload--picture-card{
    display: none;
  }
}
.ConstructionDetailsDialog {
  position: absolute;

  .projectTabs {
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    margin-top: 4%;

    ::v-deep .el-tabs__content {
      margin-top: 1%;
    }

    ::v-deep .el-tabs__nav {
      border: none;
      overflow: hidden;
      overflow-x: scroll;
    }

    ::v-deep .el-tabs__item {
      // width: 47%;
      border: 1px solid #a3d3ff;
      border-radius: 5px;
    }

    ::v-deep .el-tabs__item.is-active {
      background-color: #e8f4ff;
      color: #1890ff;
    }

    ::v-deep .el-tabs__header {
      position: fixed;
      width: 53%;
      border: none;
      top: 13%;
    }

    ::v-deep .el-collapse-item__wrap {
      padding: 0 4%;
    }

    .check {
      position: fixed;
      right: 22.1%;
      top: 13.1%;
      height: 4.6%;
      //background-color: #CC9900;
      //color: #fff;
    }
  }

  .projectTabs::-webkit-scrollbar {
    display: none;
  }

  ::v-deep .rmOldPie {

    .el-collapse-item {
      border: none;
    }
  }
}
.personInfo >span:not(:nth-child(1)){
  margin-left: 50px;
}
::v-deep .checkingDialog{
 height: 50%;
 margin-top: 6%;
 .el-dialog__body{
  height: 72%;
 }
 .el-textarea__inner{
  width: 246%;
  height: 140px;
 }
}
</style>
