<template>
  <div>
    <!-- <div v-if="shows">
      <van-nav-bar title="风险评级" left-arrow @click-left="onClickLeft" />
    </div> -->
    <div class="headers">
      
      <div>
        <van-field
          v-model="value10"
          name="检查人部门"
          label="检查人部门"
          placeholder="检查人部门"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value12"
          name="检查人"
          label="检查人"
          placeholder="检查人"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value1"
          name="检查专业"
          label="检查专业"
          placeholder="检查专业"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value2"
          name="隐患等级"
          label="隐患等级"
          placeholder="隐患等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message1"
            rows="1"
            autosize
            label="存在问题或隐患"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message2"
            rows="1"
            autosize
            label="整改措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="contents">
      <div>
        <van-field
          v-model="value3"
          name="风险点"
          label="风险点"
          placeholder="风险点"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value4"
          name="风险类型"
          label="风险类型"
          placeholder="风险类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value5"
          name="风险等级"
          label="风险等级"
          placeholder="风险等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value6"
          name="事故类型"
          label="事故类型"
          placeholder="事故类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message3"
            rows="1"
            autosize
            label="风险描述"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message4"
            rows="1"
            autosize
            label="后果及影响"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message5"
            rows="1"
            autosize
            label="管控措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
      <!-- <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column label="日期" width="90">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div> -->
    </div>
    <div class="contents1">
      <div>
        <van-cell-group>
          <van-field
            v-model="message6"
            rows="1"
            autosize
            label="整改责任单位"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message7"
            rows="1"
            autosize
            label="整改责任人"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>

      <div>
        <van-field
          v-model="value7"
          name="督办部门"
          label="督办部门"
          placeholder="督办部门"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value8"
          name="督办责任人"
          label="督办责任人"
          placeholder="督办责任人"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value11"
          name="整改类型"
          label="整改类型"
          placeholder="整改类型"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value9"
          name="整改期限"
          label="整改期限"
          placeholder="整改期限"
          readonly="false"
        />
      </div>
    </div>
    <div class="contents2">
      <div>
        <van-cell-group>
          <van-field
            v-model="message8"
            rows="1"
            autosize
            label="整改状态"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
    </div>

    <div class="contents3">
      <van-field
        v-model="value_dubanren"
        name="选择督办人"
        label="选择督办人"
        placeholder="请重新选择督办人"
        @click="open_overlay()"
      />
    </div>

    <!-- 遮罩层 -->
    <van-overlay :show="show" class="overlay" style="z-index: 999">
      <van-tree-select
        :items="items"
        :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex"
        height="92%"
        @click-item="right_click"
      />

      <div class="buttons">
        <button @click="overlay_click()">确认</button>
      </div>
    </van-overlay>

    <div class="buttons">
      <button @click="tijiao()">提及督办</button>
    </div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";

export default {
  data() {
    return {
      shows: true,
      value1: "", //检查专业
      value2: "", //隐患等级
      message1: "", //存在问题或隐患
      message2: "", //整改措施
      value3: "", //风险点
      value4: "", //风险类型
      value5: "", //风险等级
      value6: "", //事故类型
      message3: "", //风险描述
      message4: "", //后果及影响
      message5: "", //管控措施
      message6: "", //整改责任单位
      message7: "", //整改责任人
      value7: "", //督办部门
      value8: "", //督办责任人
      value9: "", //整改期限
      message8: "", //整改意见
      message9: "", //验收意见
      message10: "", //验收日期
      message11: "", //验收部门
      message12: "", //验收责任人
      message13: "", //验收结果
      fileList: [],
      infos: [],

      // 检查人部门
      value10: "",
      // 整改类型
      value11: "",
      // 检查人
      value12: "",

      // 详情id
      id: "",
      // 详情数据
      detail: {},

      // 提及督办
      show: false,
      value_dubanren: "",
      items: [],
      activeIds: [],
      activeIndex: 0,

      staffArr: [],

      // 新督办人
      staffArr_id: "",
    };
  },
  methods: {
    //返回按钮
    onClickLeft() {
      window.history.back();
      // console.log("sss");
    },

    // 获取详情
    getTroubleshootDetail(id) {
      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getTroubleshootDetail",
          {
            id: id,
          }
        )
        .then((res) => {
          this.$toast.clear();

          console.log(res.data.data);

          this.detail = res.data.data;

          const data = res.data.data;

          this.value10 = data.inspected_unit;
          this.value1 = data.inspection_specialty;
          this.value2 = data.hidden_danger_level;
          this.message1 = data.hidden_danger;
          this.message2 = data.rectification_measures;
          this.value3 = data.risk_rating.risk_point;
          this.value4 = data.risk_rating.risk_type;
          this.value5 = data.risk_rating.risk_level;
          this.value6 = data.risk_rating.accident_type;
          this.message3 = data.risk_rating.risk_description;
          this.message4 = data.risk_rating.consequences_and_impact;
          this.message5 = data.risk_rating.control_measures;
          this.message6 = data.rectification_duty_unit;
          this.message7 = data.rectification_duty_person;
          this.value7 = data.supervision_department;
          this.value8 = data.supervision_duty_person;
          this.value11 = data.rectification_type;
          this.value9 = data.rectification_term;
          this.value12 = data.inspected_person;

          this.message8 = "逾期未整改";

          this.message9 = data.check_accept_opinion;
          this.message10 = data.check_accept_date;

          this.message11 = data.check_accept_department;
          this.message12 = data.check_accept_duty_person;

          this.message13 = "未通过";
        });
    },

    // 选择督办
    // 获取部门、人
    getSectionStaff() {
      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/section/getSectionStaff",
          {}
        )
        .then((res) => {
          // console.log(res.data.data);
          this.options = res.data.data;

          this.items = res.data.data;

          this.items.map((item, index) => {
            // console.log(item.children.map(v=>{return {id: v.value ,text:v.text}}))

            item.children = item.children.map((v) => {
              return { id: v.value, text: v.text };
            });
          });
        });
    },

    open_overlay() {
      this.show = true;
      this.value_dubanren = "";
    },
    overlay_click() {
      this.show = false;

      this.activeIds.map((item, index) => {
        // console.log(item);

        let activeIds_item = item;

        this.staffArr.map((item, index) => {
          // console.log(activeIds_item);
          // console.log(item.id);

          if (activeIds_item == item.id) {
            // console.log(item.name);

            this.value_dubanren += item.name + " , ";
          }
        });
      });

      console.log(this.activeIds);

      this.staffArr_id = " ";
      this.activeIds.map((item, index) => {
        this.staffArr_id += item + ",";
      });
      this.staffArr_id = this.staffArr_id.substring(
        0,
        this.staffArr_id.lastIndexOf(",")
      );

      console.log(this.staffArr_id);
    },
    right_click(e) {},

    // 获取部门 和 责任人数据
    getStaffAndSectionData() {
      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getStaffAndSectionData",
          {}
        )
        .then((res) => {
          this.staffArr = res.data.data.staffArr;
        });
    },

    tijiao() {
      console.log(this.staffArr_id);

      if (this.staffArr_id == "") {
        this.$toast("请重新选择督办人");
        return;
      }

      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/updateTroubleshoot",
          {
            id: this.id,
            type: 6,

            // 督办责任人
            supervision_duty_person: this.staffArr_id,
          }
        )
        .then((res) => {
          this.$toast.clear();

          console.log(res.data);

          window.history.back();
        });
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#f0f0f0"; //背景色

    this.id = getAllUrlParams(window.location.href).id;
    this.getTroubleshootDetail(this.id);

    this.getSectionStaff();
    this.getStaffAndSectionData();
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
.headers {
  width: 100%;
  background: #fff;
}
.contents,
.contents1,
.contents2,
.contents3 {
  width: 100%;
  background: #fff;
  margin-top: 10px;
}
.buttons {
  width: 100%;
  text-align: center;
}
.buttons > .buttons_one {
  border: none;
  background: #4dc100;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
}
.buttons > .buttons_two {
  border: none;
  background: #c00201;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
}
.contents2_img {
  display: flex;
}
.contents2_img > p {
  font-size: 14px;
  margin-left: 16px;
  color: #646566;
}
.contents2_img > div {
  margin-left: 40px;
}

.buttons {
  width: 110px;
  height: 40px;
  background: #39f;
  margin: 10px auto;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
}
.buttons > button {
  border: none;
  color: #fff;
  background: #39f;
}

.overlay {
  box-sizing: border-box;
  padding: 25px;
}
</style>