<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-28 11:25:48
 * @LastEditors: laozt 2721205210@qq.com
 * @LastEditTime: 2023-12-19 10:56:26
-->
<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">修改执法计划</div>
        </div>
        <img src="@/assets/images/close.png" alt="" @click="closeDialog" />
      </div>
      <div v-loading="loading">
        <el-form ref="form" label-width="80px">
          <el-form-item label="企业名称:" class="form-input">
            <el-input v-model="form.enterpriseName" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="信用代码:" class="form-input">
            <el-input v-model="form.enterpriseId" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="行政区划:" class="form-input">
            <el-input v-model="cdistrict" :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-date-picker
              v-model="form.plannedYear"
              type="year"
              format="yyyy"
              :clearable="false"
              :disabled="readonly"
              value-format="yyyy"
              placeholder="请选择年月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="计划月份:" class="form-input">
            <el-select
              v-model="form.plannedMonth"
              collapse-tags
              style="margin-left: 20px"
              placeholder="请选择月份"
              @change="multipleChange"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </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="closeDialog">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import {
  listEnterprise,
  getEnterprise,
  delEnterprise,
  addEnterprise,
  updateEnterprise,
} from "@/api/yingji/enterprise";

export default {
  data() {
    return {
      dialogVisible: false,
      cdistrict: "",
      form: {
        plannedYear: "",
        plannedMonth: "",
        enterpriseName: "",
        district: "",
        createTime: "",
        planName: "",
        planContent: "",
        remark: "",
      },
      options: [
        {
          value: "1",
          label: "1月",
        },
        {
          value: "2",
          label: "2月",
        },
        {
          value: "3",
          label: "3月",
        },
        {
          value: "4",
          label: "4月",
        },
        {
          value: "5",
          label: "5月",
        },
        {
          value: "6",
          label: "6月",
        },
        {
          value: "7",
          label: "7月",
        },
        {
          value: "8",
          label: "8月",
        },
        {
          value: "9",
          label: "9月",
        },
        {
          value: "10",
          label: "10月",
        },
        {
          value: "11",
          label: "11月",
        },
        {
          value: "12",
          label: "12月",
        },
      ],
      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: {
    multipleChange(e) {
      // console.log(e);
      this.form.plannedMonth = e;
    },
    openDialog(row) {
      this.dialogVisible = true;
      this.loading = false;
      this.cdistrict = this.componendDistrict(row.district);
      this.form = row;
      // console.log(this.form);
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    onSubmit() {
      // console.log(this.form);
      updateEnterprise(this.form).then((response) => {
        this.$modal.msgSuccess("修改成功");
        this.closeDialog()
      });
    },
    // 匹配行政区划
    componendDistrict(district) {
      let fullName;
      let treeData = JSON.parse(localStorage.getItem("TREE_DATA"));
      treeData.map((item) => {
        if (item.districtCode == district) {
          fullName = item.district;
        } else {
          item.children.map((itemTwo) => {
            if (itemTwo.countyCode == district) {
              fullName = item.district + "-" + itemTwo.county;
            }
          });
        }
      });
      return fullName;
    },
  },
};
</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>
