<template>
  <div class="triplePreventionInspection">
    <div class="triplePreventionInspection_head">
      <br />
      <el-row>
        <el-col :span="6">
          <span class="span-inline-block">&nbsp;&nbsp;&nbsp;被检单位：</span>
          <el-select style="width:70%;" v-model="bjdwName" placeholder="请选择">
            <el-option
              v-for="item in beijiandanweiList"
              :key="item.qyjgdm"
              :label="item.qymc"
              :value="item.qyjgdm"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span class="span-inline-block">检查单位：</span>
          <el-cascader
            :options="treeData"
            v-model="jcdwName"
            :props="{ checkStrictly: true, label: 'orgName',value: 'orgCode', children: 'children'}"
            style="width:70%;"
            clearable
          ></el-cascader>
        </el-col>
        <el-col :span="10">
          <span class="span-inline-block">检查时间：</span>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-col>
        <el-col :span="2">
          &nbsp;
          <el-button type="primary" style="float:right; width: 60%;" @click="getListchaxun()">查询</el-button>
        </el-col>
      </el-row>
      <br />
    </div>
    <div class="export">
      <el-button type="primary" style="width: 5%;">导出</el-button>
    </div>
    <div class="dail_table">
      <tableView :list="list" :options="tablePar" :columns="columns" :pageInfo="pageInfo"></tableView>
    </div>
    <div class="childrenTables" v-show="childrenTable == true">
      <tableView
        :list="children_list"
        :options="children_tablePar"
        :columns="children_columns"
        :pageInfo="children_pageInfo"
      ></tableView>
    </div>
  </div>
</template>

<script>
import tableView from "@/components/table/el-index";
import {
  getDailyinsprctionList,
  withdraw,
  lowerHair,
  bjdwmchq,
  export_list
} from "@/api/missionDispatchManage/dailyinspection/index.js";
import { inspectionUnit, getDictionaryList } from "@/api/setTask/index.js";
export default {
  components: {
    tableView
  },
  data() {
    return {
      total: "", //总条数
      treeData: [],
      beijiandanweiList: [], //被检单位列表
      jcdwName: "", //检查单位名称
      bjdwName: "", //被检单位名称
      pagenum: "",
      value1: "", //时间段handleselectionchange
      inspectedUnitslist: [], //被检单位信息
      childrenTable: false, //字列表是否展示
      startDate: "", //检查开始时间
      endDate: "", //检查结束时间
      list: [],
      tablePar: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        showIndex: true //是否显示选择框
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false // 是否支持列表项选中功能handleSelectionChange
      },
      pageInfo: {
        currentPage: this.pagenum,
        pageSize: 10,
        total: 100,
        handleCurrentChange: val => {
          this.pagenum = val;
          this.getList();
        }
      },
      columns: [
        {
          prop: "rwId",
          label: "任务编号",
          align: "center",
          tooltip: true,
          render: (h, params) => {
            return h("a", [
              h(
                "span",

                {
                  props: {
                    showOverflowTooltip: "true"
                  },
                  on: {
                    click: () => {
                      if (this.childrenTable == true) {
                        this.childrenTable = false;
                      } else {
                        this.childrenTable = true;
                      }
                      console.log(this.childrenTable);
                    }
                  }
                },
                params.row.rwId
              )
            ]);
          }
        },
        {
          prop: "rwlxName",
          label: "任务类型",
          align: "center",
          tooltip: true
        },
        {
          prop: "rwName",
          label: "任务名称",
          align: "center",
          tooltip: true
        },
        {
          prop: "jcdwmc",
          label: "检查单位",
          align: "center",
          tooltip: true
        },
        {
          prop: "rwqsr",
          label: "检查时间段",
          align: "center",
          tooltip: true,
          render: (h, params) => {
            return h("div", [this.getBeginAndEndDate(params.row)]);
          }
        },
        {
          prop: "rwZt",
          label: "状态",
          align: "center",
          tooltip: true,
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {}
                  },
                  style: {
                    color: this.colors(params.row.rwZt)
                  }
                },
                (() => {
                  switch (params.row.rwZt) {
                    case 0:
                      return "待分配";
                      break;
                    case 1:
                      return "待下发";
                      break;
                    case 2:
                      return "已下发";
                      break;
                    case 4:
                      return "已超期";
                      break;
                    case 5:
                      return "超期完成";
                      break;
                    case 6:
                      return "已归档";
                      break;
                  }
                })()
              )
            ]);
          }
        },
        {
          prop: "state",
          label: "操作",

          align: "left",
          render: (h, params) => {
            return h("div", [
              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      class: "item",
                      content: "查看",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      click: () => {
                        this.$router.push({
                          path: "/inspection/floodControlDetail",
                          query: {
                            rwid: params.row.rwId,
                            jhid: params.row.jhId
                          }
                        });
                      }
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            this.$router.push({
                              path: "/inspection/floodControlDetail",
                              query: {
                                rwid: params.row.rwId,
                                jhid: params.row.jhId
                              }
                            });
                          }
                        },
                        class: "el-icon-search",
                        style: {
                          color: "#fff",
                          background: "#24ac43",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ]),

              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      class: "item",
                      effect: "dark",
                      content: "分配",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      style: {
                        display: params.row.rwZt == 0 ? "inline-block" : "none"
                      },
                      click: () => {
                        this.$router.push({
                          path: "/inspection/floodControlDistribution",
                          query: {
                            rwid: params.row.rwId,
                            jhid: params.row.jhId
                          }
                        });
                      }
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            this.$router.push({
                              path: "/inspection/floodControlDistribution",
                              query: {
                                rwid: params.row.rwId,
                                jhid: params.row.jhId
                              }
                            });
                          }
                        },
                        class: "el-icon-sort",
                        style: {
                          display:
                            params.row.rwZt == 0 ? "inline-block" : "none",
                          color: "#fff",
                          background: "#006bd5",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ]),

              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      class: "item",
                      effect: "dark",
                      content: "编辑",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      style: {
                        display: params.row.rwZt == 1 ? "inline-block" : "none"
                      },
                      click: () => {
                        this.$router.push({
                          path: "/inspection/floodControlEdit",
                          query: {
                            rwid: params.row.rwId,
                            jhid: params.row.jhId
                          }
                        });
                      }
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            this.$router.push({
                              path: "/inspection/floodControlEdit",
                              query: {
                                rwid: params.row.rwId,
                                jhid: params.row.jhId
                              }
                            });
                          }
                        },
                        class: "el-icon-edit-outline",
                        style: {
                          display:
                            params.row.rwZt == 1 ? "inline-block" : "none",
                          color: "#fff",
                          background: "#7265b7",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ]),

              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      class: "item",
                      effect: "dark",
                      content: "下发",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      style: {
                        display: params.row.rwZt == 1 ? "block" : "none"
                      },
                      click: () => {}
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            // this.mylowerHair(params.row);
                            this.$router.push({
                          path: "/inspection/floodControlEdit",
                          query: {
                            rwid: params.row.rwId,
                            jhid: params.row.jhId
                          }
                        });
                          }
                        },
                        class: "el-icon-bottom",
                        style: {
                          display:
                            params.row.rwZt == 1 ? "inline-block" : "none",
                          color: "#fff",
                          background: "#006bd5",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ]),

              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      class: "item",
                      effect: "dark",
                      content: "归档",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      style: {
                        display: params.row.rwZt == 3 ? "inline-block" : "none"
                      },
                      click: () => {}
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            this.btnFile();
                          }
                        },
                        class: "el-icon-folder",
                        style: {
                          display:
                            params.row.rwZt == 3 ? "inline-block" : "none",
                          color: "#fff",
                          background: "#006bd5",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ]),

              h("span", [
                h(
                  "el-tooltip",
                  {
                    props: {
                      effect: "dark",
                      content: "撤回",
                      placement: "top",
                      effect: "light"
                    },
                    on: {
                      style: {
                        display: params.row.rwZt == 2 ? "inline-block" : "none",
                        background: "#ffffff",
                        color: "#000000"
                      },
                      click: () => {}
                    }
                  },
                  [
                    h(
                      "i",
                      {
                        on: {
                          click: () => {
                            this.withdraws(params.row);
                          }
                        },
                        class: "el-icon-refresh-left",
                        style: {
                          display:
                            params.row.rwZt == 2 ? "inline-block" : "none",
                          color: "#fff",
                          background: "#f9b000",
                          padding: "5px",
                          margin: "5px",
                          paddingLeft: "5px",
                          borderRadius: "3px"
                        }
                      },
                      ""
                    )
                  ]
                )
              ])
            ]);
          }
        }
      ],
      children_list: [],
      handleSelectionChangec(val) {
        console.log("val:", val);
      },
      children_tablePar: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false, // 是否支持列表项选中功能
        showIndex: true //是否显示选择框
      },
      children_options: {
        stripe: true, // 是否为斑马纹 table
        loading: false, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: false // 是否支持列表项选中功能
      },
      children_pageInfo: {
        currentPage: 2,
        pageSize: 10,
        total: 100,
        handleSizeChange: val => {
          console.log(val);
        },
        handleCurrentChange: val => {
          console.log(val);
        }
      },
      children_columns: [
        {
          prop: "type",
          label: "任务编号",
          align: "center",
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {
                      if (this.childrenTable == true) {
                        this.childrenTable = false;
                      } else {
                        this.childrenTable = true;
                      }
                      console.log(this.childrenTable);
                    }
                  }
                },
                params.row.type
              )
            ]);
          }
        },
        {
          prop: "title",
          label: "被检单位",
          align: "center"
        },
        {
          prop: "title",
          label: "检查组组长",
          align: "center"
        },
        {
          prop: "title",
          label: "检查时间",
          align: "center"
        },
        {
          prop: "title",
          label: "状态",
          align: "center"
        },
        {
          prop: "title",
          label: "整改方式",
          align: "center"
        },
        {
          prop: "state",
          label: "操作",
          align: "center",
          render: (h, params) => {
            return h("a", [
              h(
                "span",
                {
                  on: {
                    click: () => {
                      this.$router.push("/inspection/dailyinspectionDetail");
                      console.log("11");
                    }
                  }
                },
                " 查看"
              ),
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log("2");
                    }
                  }
                },
                " 催办"
              ),
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log("3");
                    }
                  }
                },
                " 编辑"
              ),
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log("4");
                      this.btnRecommend();
                    }
                  }
                },
                " 下发"
              ),
              h(
                "span",
                {
                  on: {
                    click: () => {
                      console.log("6");
                      this.btnRecommend();
                    }
                  }
                },
                " 撤回"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
    this.get_bjdwlist();
    this.dictionaryList();
  },
  methods: {
    dictionaryList() {
      let that = this;
      let data = {
        groupId: "50001"
      };
      getDictionaryList(data)
        .then(actionMethod)
        .catch(actionMethod);
      function actionMethod(response) {
        if (response && response.infoCode === 200) {
          that.taskType = response.data;
        }
      }
      inspectionUnit(sessionStorage.getItem("orgCode"))
        .then(actionMethod2)
        .catch(actionMethod2);
      function actionMethod2(response) {
        if (response && response.infoCode === 200) {
          that.treeData = response.data.children;
          that.total = response.data.total || 0;
        }
      }
    },
    //导出
    exports() {
      let params = {
        obj: {
          bjdwId: this.bjdwName,
          jcdwId: this.jcdwName[this.jcdwName.length - 1],
          jcjssjDate: this.value1[1],
          jckssjDate: this.value1[0],
          orgId: sessionStorage.getItem("orgCode")
        }
      };
      export_list(params)
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err => {
            console.log(err);
          });
        });
    },
    //获取被检单位名称
    get_bjdwlist() {
      let params = {
        orjCode: {
          qyjgdm: sessionStorage.getItem("orgCode")
        }
      };
      bjdwmchq(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.beijiandanweiList = res.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查询
    query() {
      console.log(this.value1);
    },
    //撤回
    withdraws(row) {
      let params = {
        rwId: row.rwId
      };
      withdraw(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.getList();
          }
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    //color
    colors(rwZt) {
      switch (rwZt) {
        case 0:
          return "#006bd5";
          break;
        case 1:
          return "#006bd5";
          break;
        case 2:
          return "#02a05b";
          break;
        case 3:
          return "#02a05b";
          break;
      }
    },
    //下发length
    mylowerHair(row) {
      this.$confirm("是否下发任务？", "提示", {
        confirmButtonText: "下发",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = row;
          lowerHair(params)
            .then(res => {
              if (res.infoCode == 200) {
                this.getList();
                this.$message({
                  showClose: true,
                  message: "下发成功",
                  type: "success"
                });
                this.$router.push("/inspection/floodControlInspection");
              } else {
                this.$message({
                  showClose: true,
                  message: res.msg,
                  type: "warning"
                });
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getBeginAndEndDate(row) {
      return row.jckssjDate + "至" + row.jcjssjDate;
    },
    getList() {
      console.log("1");
      let params = {
        pageNum: this.pageInfo.currentPage,
        pageSize: 10,
        obj: {
          rwlx: "5000120"
        }
      };
      getDailyinsprctionList(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.list = res.data.list;
            this.pageInfo.total = res.data.total;
          }
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //条件查询或取款列表
    getListchaxun() {
      console.log("1");
      let params = {
        pageNum: this.pageInfo.currentPage,
        pageSize: 10,
        obj: {
          bjdwId: this.bjdwName,
          jcdwId: this.jcdwName[this.jcdwName.length - 1],
          jcjssjDate: this.value1[1],
          jckssjDate: this.value1[0],
          orgId: sessionStorage.getItem("orgCode")
        }
      };
      getDailyinsprctionList(params)
        .then(res => {
          if (res.infoCode == 200) {
            this.list = res.data.list;
          }
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    btnRecommend() {
      this.mylowerHair();
    },
    btnFile() {
      this.$confirm("是否归档？", "提示", {
        confirmButtonText: "归档",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "归档成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消归档"
          });
        });
    },
    btnwithdraw() {
      this.$confirm("是否撤回该任务？", "提示", {
        confirmButtonText: "撤回",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "撤回成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消撤回"
          });
        });
    }
  }
};
</script>

<style scoped>
.triplePreventionInspection {
  margin-left: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 218px);
  width: calc(100% - 40px);
  background: #f6f7f9;
  border: 1px solid #efeded;
  padding: 0 10px;
}
.triplePreventionInspection_head {
  width: 100%;
  border-bottom: 1px dashed #5aaafa;
}
.export {
  width: 100%;
  margin: 10px 0px;
  background: #edf5fd;
  padding: 10px 0 10px 10px;
}
.dail_table {
  margin: 10px 0px;
}
</style>