<template>
  <div class="dailyinspectionDetails">
    <!--    <div class="dailyinspectionDetail_title">-->
    <!--        <h2 style="font-size: 16px;margin-left: 10px;">任务列表</h2>-->
    <!--    </div>-->
    <div class="dailyinspectionDetail_content">
      <el-form>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">任务编号：</span>
            <el-input style="width: 64%;" disabled v-model="detailList.rwId"></el-input>
          </el-col>
          <el-col :span="12">
            <span class="span_right">任务名称：</span>
            <el-input style="width: 70%;" disabled v-model="detailList.rwName"></el-input>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">检查项目：</span>
            <el-input style="width: 64%" :value="detailList.jcxmlx == 0?'单项检查':'综合检查'" disabled></el-input>
          </el-col>
          <el-col :span="12">
            <span class="span_right">检查子项：</span>
            <el-select
              disabled
              style="width:70%;"
              collapse-tags
              v-model="valueZx"
              multiple
              placeholder="请选择检查内容"
            >
              <el-option
                v-for="(item) in jczxname"
                :key="item.jcxmId"
                :label="item.jcxmName"
                :value="item.jcxmId"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>

        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">检查单位：</span>
            <el-input style="width: 64%;" disabled v-model="detailList.jcdwmc"></el-input>
          </el-col>
          <el-col :span="12">
            <span class="span_right">被检单位类型：</span>
            <el-select
              style="width:70%;"
              disabled
              collapse-tags
              v-model="valueLx"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="(item) in bjdwlxname"
                :key="item.jcQylx"
                :label="item.jcQylxmc"
                :value="item.jcQylx"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">检查方式：</span>
            <el-radio-group v-model="abc">
              <el-radio :label="0">现场检查</el-radio>
              <el-radio :label="1">远程检查</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">检查开始时间：</span>
            <el-input
              disabled
              style="width: 64%;"
              class="inputWidth"
              v-model="detailList.jckssjDate"
            ></el-input>
          </el-col>
          <el-col :span="12">
            <span class="span_right">检查结束时间：</span>
            <el-input
              disabled
              style="width: 70%;"
              class="inputWidth"
              v-model="detailList.jcjssjDate"
            ></el-input>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row>
          <el-col :span="24">
            <span class="span_right">人员取得方式：</span>
            <el-radio-group v-model="detailList.jczqdfs" style="width: 50%;">
              <el-radio :label="1">双随机</el-radio>
              <el-radio :label="2">被检单位抽取</el-radio>
              <el-radio :label="0">指定</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">关联文件：</span>
          </el-col>
          <el-col :span="12">
            <span class="span_right">附件：</span>
          </el-col>
        </el-row>
        <br />
        <el-row>
          <el-col :span="23">
            <h1 class="title_style">检查表单</h1>
            <inspectTableView
              :list="dcbdlista"
              @handleSelectionChange="handleSelectionChange"
              :options="tablePar"
              :columns="columns"
            ></inspectTableView>
          </el-col>
        </el-row>
        <br />
        <div v-show="teamVOss.length>0">
          <el-row>
            <el-col :span="24">
              <h1 class="title_style">检查组</h1>
            </el-col>
          </el-row>
          <!--        <el-row>-->
          <!--          <el-col :span="24">-->
          <!--            <h2 style="font-size: 16px;">&nbsp;&nbsp;&nbsp;检查组一</h2>-->
          <!--          </el-col>-->
          <!--        </el-row>-->
          <br />
          <el-row v-for="(item,index) in teamVOss" :key="index">
            <el-col :span="11">
              <h2>&nbsp;检查人员</h2>
              <inspectTableView
                :list="item.members"
                @handleSelectionChange="handleSelectionChange"
                :options="tablePar"
                :columns="jcrycolumnshx"
              ></inspectTableView>
            </el-col>
            <el-col :span="1">
              <span>&nbsp;</span>
            </el-col>
            <el-col :span="10">
              <h2>被查单位</h2>
              <inspectTableView
                :list="item.organizes"
                @handleSelectionChange="handleSelectionChange"
                :options="tablePar"
                :columns="bjdwcolumnshx"
              ></inspectTableView>
            </el-col>
          </el-row>
          <br />
        </div>
        <br />
        <el-row>
          <el-col :span="12">
            <span class="span_right">下发人：</span>
            <el-input class="inputWidth" v-model="detailList.userName"></el-input>
          </el-col>
          <el-col :span="12">
            <span class="span_right">下发时间：</span>
            <el-input class="inputWidth" v-model="detailList.xfTime"></el-input>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row>
          <el-col style="text-align:center;">
            <el-button type="primary" @click="go_specialInspectionSupervise()">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <br />
  </div>
</template>

<script>
import inspectTableView from "../../../components/table/el-index.vue";
import {
  getzidianbiao,
  getDailyinsprctionListDetail,
  hxbjdw,
  dcbdList
} from "@/api/missionDispatchManage/dailyinspection/index.js";
import { getDictionaryList } from "@/api/setTask/index.js";
export default {
  components: {
    inspectTableView
  },
  data() {
    return {
      abc: 0,
      checkContent: [], //检查内容获取
      jczxname: [], //检查子项获取
      valueZx: [], //检查子项值
      valueNr: [], //检查内容值
      valueLx: [], //检查类型值
      bjdwlxzdb: [], //备件单位类型列表
      jczxzdb: [], //检查子项列表
      jcxmzdb: [], //检查项目列表
      bjdwlxname: [], //被检单位类型
      teamVOss: [],
      cqjglist: [],
      dcbdlista: [],
      bjdwcolumnshx: [
        {
          prop: "bjdwName",
          label: "被检单位",
          align: "center"
        },
        {
          prop: "title",
          label: "操作",
          align: "center",
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log(1);
                    }
                  }
                },
                "新增被检单位"
              )
            ]);
          }
        }
      ],
      jcrycolumnshx: [
        {
          prop: "",
          label: "人员属性",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("span", params.row.zylx == 0 ? "组长" : "组员")
            ]);
          }
        },
        {
          prop: "zyName",
          label: "人员名称",
          align: "center"
        },
        {
          prop: "zydw",
          label: "所属单位",
          align: "center"
        },
        {
          prop: "title",
          label: "操作",
          align: "center",
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log(1);
                    }
                  }
                },
                "更换"
              )
            ]);
          }
        }
      ],
      radio: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        desc: ""
      },
      checkContentList: [],
      checkContentLists: [],
      checkSubitems: [],
      detailList: {}, //详情页数据
      SubitemMsg: {}, //检查子项数据
      handleSelectionChange(val) {
        console.log("val:", val);
      },
      tablePar: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        showIndex: true //是否显示选择框
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false // 是否支持列表项选中功能
      },
      pageInfo: {
        currentPage: 2,
        pageSize: 10,
        total: 100,
        handleSizeChange: val => {
          console.log(val);
        },
        handleCurrentChange: val => {
          console.log(val);
        }
      },
      columns: [
        {
          prop: "bdName",
          label: "表单名称",
          align: "center"
        },
        {
          prop: "state",
          label: "操作",
          align: "center",
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log(this.dcbdlista);
                      this.dcbdlista.forEach(item => {
                        this.$router.push({
                          path: `${params.row.bdLu}`,
                          query: {
                            look: "look"
                          }
                        });
                      });
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        }
      ]
    };
  },

  methods: {
    go_specialInspectionSupervise() {
      this.$router.push("/inspection/specialInspectionSupervise");
    },
    //根据后台数据显示select显示内容
    hxjczx() {
      //检查子项
      this.jczxname.forEach(item => {
        this.valueZx.push(item.jcxmId);
      });

      //检查内容
      this.checkContent.forEach(item => {
        this.valueNr.push(item.jcnrId);
      });

      //被检单位类型
      this.bjdwlxname.forEach(item => {
        this.valueLx.push(item.jcQylx);
      });
    },
    //获取详情页信息
    dcbdListshx() {
      let params = {
        rwId: this.$route.query.rwid,
        jhId: this.$route.query.jhid
      };
      dcbdList(params)
        .then(res => {
          this.detailList = res.data;
          this.dcbdlista = res.data.taskFormVO;
          this.checkContent = res.data.checkContentVO; //检查内容获取
          this.bjdwlxname = res.data.inspectedUnitsType; //被检单位类型获取
          this.jczxname = res.data.taskCheckItemsVO; //检查子项获取
          this.teamVOss = res.data.teamVOs;
          this.hxjczx(); //根据后台数据显示select内容
        })
        .catch(err => {
          console.log(err);
        });
    },
    // //获取回显检查表单
    // get_hxbd(){
    //   let params = {
    //     taskId:"CBRC1908304334"
    //   }
    //   hxbjdw(params).then(res=>{
    //     console.log(res)
    //     this.cqjglist = res.data
    //   }).catch(err=>{
    //     console.log(err)
    //   })
    // },
    //获取字典表检查类型信息
    get_checkType() {
      let params = {
        groupId: "50001"
      };
      getzidianbiao(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.bjdwlxzdb = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //检查内容字典表
    get_CheckContent() {
      let params = {
        groupId: "50002"
      };
      getzidianbiao(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.checkContentList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取字典表检查子项信息
    get_checkSubitems() {
      let params = {
        groupId: "50004"
      };
      getzidianbiao(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.jczxzdb = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {
    this.get_CheckContent(); //检查内容字典表
    this.get_checkSubitems(); //检查子项字典表
    this.get_checkType(); //被检单位类型字典表
    // this.get_hxbd()//回显表单
    this.dcbdListshx(); //详情页数据
  }
};
</script>

<style scoped>
.inputWidth {
  width: 300px;
}
.dailyinspectionDetails {
  margin-left: 10px;
  overflow-y: auto;
  height: calc(100vh - 218px);
  width: calc(100% - 40px);
  overflow-x: hidden;
  background: #f6f7f9;
  border: 1px solid #efeded;
  padding: 0 10px;
}
.dailyinspectionDetail_content {
  background: rgb(244, 245, 248);
  padding: 10px 10px 10px 30px;
  height: calc(100vh - 60px);
  width: calc(100% - 30px);
  /*margin: 10px;*/
}
.title_style {
  border-left: 3px solid #409eff;
  padding-left: 4px;
  font-size: 15px;
  margin-bottom: 10px;
}
.span_right {
  text-align: right;
  display: inline-block;
  width: 145px;
}
</style>


