<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-28 11:25:48
 * @LastEditors: JC9527
 * @LastEditTime: 2023-10-09 10:01:06
-->
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    append-to-body
    custom-class="dialog-boxed"
    width="50%"
  >
    <div class="dialog-slot">
      <div class="closeClick">
        <div class="newplan">
          <div class="line"></div>
          <div class="span">{{ title }}</div>
        </div>
        <img src="@/assets/images/close.png" alt="" @click="Close" />
      </div>
      <div v-loading="loading">
        <el-form ref="form" label-width="80px" v-if="idTwo == 1">
          <el-form-item label="企业名称:" class="form-input">
            <el-input v-model="form.entprName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="行政区划:" class="form-input">
            <el-input v-model="form.district" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="发布时间:" class="form-input">
            <el-input v-model="form.createTime" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="计划年月:" class="form-input">
            <!-- <el-input v-model="form.plannedYear" :readonly="true"></el-input> -->
            <el-date-picker
              v-model="form.plannedYear"
              type="month"
              format="yyyy-MM"
              :clearable="false"
              :disabled="readonly"
              value-format="yyyy-MM"
              placeholder="请选择年月">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="计划标题:">
            <el-input v-model="form.planName" :readonly="readonly" show-word-limit :maxlength="64"></el-input>
          </el-form-item>
          <el-form-item label="计划内容:" class="form-textarea">
            <el-input 
              v-model="form.planContent"
              type="textarea"
              resize="none"
              :maxlength="2000"
              show-word-limit
              :readonly="readonly"
              placeholder="请输入计划内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注:" class="form-textarea">
            <el-input
              v-model="form.remark"
              type="textarea"
              resize="none"
              :maxlength="2000"
              show-word-limit
              :readonly="readonly"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="onSubmit" v-if="!readonly">确认修改</el-button>
            <el-button @click="Close">关闭</el-button>
          </el-form-item>
        </el-form>
        <el-descriptions :column="2" border v-else>
          <el-descriptions-item
              :label="item.label"
              v-for="(item, index) in listDes"
              :key="index"
              :span="item.span ? item.span : 1"
            >
              {{ item.value}}
            </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { Loading } from "element-ui";
export default {
  data() {
    return {
      dialogVisible:false,
      mydistrict:'',
      form:{
        entprName:'',
        district:'',
        createTime:'',
        plannedYear:'',
        planName:'',
        planContent:'',
        remark:''
      },
      id:'',
      idTwo:'',
      readonly:false,
      loading:true,
      title:'查看详情',
      listDes:[
        {
          tag:'entprName',
          label:'企业名称',
          value:'',
        },{
          tag:'district',
          label:'行政区划',
          value:'',
        },{
          tag:'createTime',
          label:'发布时间',
          value:'',
        },{
          tag:'plannedYear',
          label:'计划年月',
          value:'',
        },{
          tag:'planName',
          label:'计划标题',
          value:'',
          span:2,
        },{
          tag:'planContent',
          label:'计划内容',
          value:'',
          span:2,
        },{
          tag:'remark',
          label:'备注',
          value:'',
          span:2,
        },
      ],
      district:[]
    }
  },
  methods:{
    open(item,id) {
      this.idTwo = id
      this.id = item.id
      this.getDistrict()
      this.getMyData(item.id,id)
      if(id == 2) {
        this.readonly = true;
        this.title = '查看详情'
      } else {
        this.readonly = false;
        this.title = '修改详情'
      }
      this.dialogVisible = true;
    },
    async getMyData(id,idTwo){
      this.loading = true;
      let data = await this.$api.yingji.bPlanManageTwo(id)
      if(data.code == 200){
        let { entprName,district,createTime,plannedYear,planName,planContent,remark } = data.data
        // let listData = data.data
        this.mydistrict = district
        let myDistrict = this.componendDistrict(district)
        console.log(myDistrict)
        let mycreateTime = createTime.split(' ')[0]
        if(idTwo == 2) {
          let obj = { entprName,myDistrict,mycreateTime,plannedYear,planName,planContent,remark }
          this.changeDescriptions(this.listDes,...Object.values(obj))
          // for(let key in listData){
          //   this.listDes.forEach((value1, index1) => {
          //     if (key == value1.tag) {
          //       this.listDes[index1].value = listData[key];
          //       return;
          //     }
          //   });
          // }
          // this.listDes.forEach((value1, index1) => {
          //   //重大危险源等级
          //   if (value1.tag == "district") {
          //     this.listDes[index1].value = myDistrict;
          //   }
          //   //经济类型大类
          //   if (value1.tag == "createTime") {
          //     this.listDes[index1].value = mycreateTime;
          //   }
          // })
        } else {
          this.form = { entprName,district:myDistrict,createTime:mycreateTime,plannedYear,planName,planContent,remark }
        }
        this.loading = false;
      }
    },
    changeDescriptions(arr,...items){
      items.map((item,index)=>{
        arr[index].value = item || '/'
      })
    },
    Close(item) {
      this.dialogVisible = false;
      Object.keys(this.form).forEach((key) => (this.form[key] = ""));
      if (item == "newsuccess") {
        this.$emit("close");
      }
    },
    // 计算当前时间
    getData() {
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年var mon = myDate.getMonth() + 1; //获取当前月
      var mon = myDate.getMonth() + 1 < 10 ? "0" + (myDate.getMonth() + 1) : myDate.getMonth() + 1 == 0 ? "00" : myDate.getMonth() + 1;
      var date = myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate(); //获取当前日
      var hours = myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours(); //获取当前小时
      var minutes = myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes(); //获取当前分钟
      var seconds = myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds(); //获取当前秒var now = year + "_" + mon + "_" + date + " "+ hours + ":" + minutes + ":" + seconds;
      var now = year + "-" + mon + "-" + date + " " + hours + ":" + minutes + ":" + seconds;
      return now;
    },
    onSubmit(){
      if(this.form.planContent && this.form.planName){
        this.$modal.confirm("你确认修改吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(async() => {
          try {
            let downloadLoadingInstance = Loading.service({
              text: "正在修改计划，请稍候",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            // console.log(this.form)
            const { planName,remark,planContent } = this.form;
            let obj = {updateTime:this.getData(),planContent:planContent,planName:planName,remark:remark,id:this.id}
            // console.log(obj)
            let data = await this.$api.yingji.bPlanEnterprise('put',obj)
            console.log(data)
            if(data.code == 200){
              downloadLoadingInstance.close();
              this.$message({
                showClose: true,
                message: '修改成功',
                type: 'success'
              });
              this.Close("newsuccess")
            }
          } catch (error) {
            
          }
        })
      }
    },
    async getDistrict(){
      let data = await this.$api.yingji.tree();
      this.district = data.data;
    },
    // 匹配行政区划
    componendDistrict(district){
      let name 
      this.district.map((item)=>{
        if(item.subdistrict == district) {
          name = item.institutionName
        } else {
          item.children.map((itemTwo)=>{
            if(itemTwo.subdistrict == district) {
              name = item.institutionName + '-' + itemTwo.institutionName
            }
          })
        }
      })
      return name
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-descriptions-row th {
  width: 20% !important;
  font-size: 14px;
  font-family: "Alibaba PuHuiTi";
  font-weight: 400;
}
::v-deep .el-descriptions-row td {
  width: 30% !important;
  font-size: 14px;
  font-family: "Alibaba PuHuiTi";
  font-weight: 400;
}
.dialog-slot {
  .closeClick {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    background: #f8f9fa;
    box-shadow: 0px 1px 0px 0px #dbe0e8;
    background-color: #e0eaf8;
    img {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .newplan {
      display: flex;
      align-items: center;
      .line {
        margin-right: 10px;
        width: 5px;
        height: 16px;
        background-color: #1e70de;
      }
      .span {
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #1e70de;
      }
    }
  }
  .form-input {
    display: inline-block;
    width: 50%;
  }
  ::v-deep .el-input {
    .el-input__inner {
      font-size: 15px;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 400;
      color: #525966;
    }
  }
  .form-textarea {
    ::v-deep .el-textarea {
      height: 180px;
      .el-textarea__inner {
        height: 100%;
        font-size: 15px;
        font-family: 'Alibaba PuHuiTi';
        font-weight: 400;
        color: #525966;
      }
    }
  }
  .btns {
    text-align: right;
    ::v-deep .el-button {
      border-radius: 4px;
    }
  }
}
::v-deep .el-dialog__body {
  padding: 30px 15px;
}
</style>
