<template>
  <div class="dashboard-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="企业信息管理" name="first">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="9">
              <el-form-item label="所属区域:">
                <el-cascader
                  v-model="qyszqyValue"
                  :options="options"
                  :props="props"
                  collapse-tags
                  clearable
                  @change="qyszqyChange(qyszqyValue)"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称:">
                <el-input v-model="form.qymc" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态:">
                <el-select v-model="form.qyzt" clearable placeholder="请选择">
                  <el-option
                    v-for="(item,index) in findingsAuditObj"
                    :key="index"
                    :label="item.value"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                @click="searchInfo"
                class="mgt-3"
                style="margin-left: 20px;"
              >
                <i class="iconfont">&#xe67f;</i>
                查询
              </el-button>
            </el-col>
          </el-row>
          <div style="clear:both;border-top:1px dashed #5aaafa;margin-bottom:10px;"></div>
          <el-form>
            <div class="addBtnBg">
              <el-button type="primary" @click="modify" class="mgt-3">
                <i class="iconfont">&#xe698;</i>
                新增
              </el-button>
              <label class="budgetSubmission-uploadBtn">
                <i class="iconfont">&#xe675;</i>
                <span>导入</span>
                <input type="file" @change="onUpload" />
              </label>
              <el-button type="primary" @click="exportFn" class="mgt-3 margin-l-0">
                <i class="iconfont">&#xe682;</i>
                导出
              </el-button>
              <el-button type="primary" @click="reportFun" class="mgt-3">
                <i class="iconfont">&#xe601;</i>
                上报
              </el-button>
            </div>
          </el-form>
        </el-form>
        <el-table :data="tableData" v-loading="tableLoading" stripe border style="width: 100%">
          <el-table-column type="selection" width="35" @selection-change="chooseTable"></el-table-column>
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="qymc" label="企业名称" width="120" align="center"></el-table-column>
          <el-table-column prop="tyshxydm" label="统一社会信用代码" width="140" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.tyshxydm}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="qyszqy" label="所在区域 （旗县）" width="140" align="center"></el-table-column>
          <el-table-column prop="qytxdz" label="地址" width="80" align="center"></el-table-column>
          <el-table-column prop="qyxz" label="企业性质" width="100" align="center"></el-table-column>
          <el-table-column label="应急级别" align="center">
            <el-table-column prop="emergencyProvincialLevel" label="省级" width="50" align="center"></el-table-column>
            <el-table-column prop="emergencyMunicipalLevel" label="市级" width="50" align="center"></el-table-column>
            <el-table-column prop="emergencyCountyLevel" label="县级" width="50" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="fddbr" label="负责人" width="100" align="center"></el-table-column>
          <el-table-column prop="bgdh" label="联系电话" width="100" align="center"></el-table-column>
          <el-table-column label="日加工能力（吨）" align="center">
            <el-table-column prop="rjgnlMf" label="面粉" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlMf}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlDm" label="大米" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlDm}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlSyy" label="食用油" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlSyy}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlQt" label="其他" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlQt}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <span
                :class="{'status-green':scope.row.status=='正常','status-red':scope.row.status=='注销'}"
              >{{scope.row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="light" content="修改" placement="top">
                <el-button
                  @click.stop="modify(scope.row,'update')"
                  type="primary"
                  size="mini"
                  class="button operate_edit_btn"
                >
                  <i class="iconfont">&#xe693;</i>
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="注销" placement="top">
                <el-button
                  @click.stop="cancellation(scope.row)"
                  type="primary"
                  size="mini"
                  class="button operate_delete_btn"
                >
                  <i class="iconfont">&#xe688;</i>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史记录查询" name="second">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="9">
              <el-form-item label="所属区域:">
                <el-cascader
                  v-model="qyszqyValue"
                  :options="options"
                  :props="props"
                  collapse-tags
                  clearable
                  @change="qyszqyChange(qyszqyValue)"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业名称:">
                <el-input v-model="form.qymc" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-button
                type="primary"
                @click="searchInfoPop"
                class="mgt-3"
                style="margin-left: 20px;"
              >
                <i class="iconfont">&#xe67f;</i>
                查询
              </el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" v-loading="tableLoading" stripe border style="width: 100%">
          <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
          <el-table-column prop="qymc" label="企业名称" width="120" align="center"></el-table-column>
          <el-table-column prop="tyshxydm" label="统一社会信用代码" width="140" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.tyshxydm}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="qyszqy" label="所在区域 （旗县）" width="140" align="center"></el-table-column>
          <el-table-column prop="qytxdz" label="地址" width="80" align="center"></el-table-column>
          <el-table-column prop="qyxz" label="企业性质" width="100" align="center"></el-table-column>
          <el-table-column label="应急级别" align="center">
            <el-table-column prop="emergencyProvincialLevel" label="省级" width="50" align="center"></el-table-column>
            <el-table-column prop="emergencyMunicipalLevel" label="市级" width="50" align="center"></el-table-column>
            <el-table-column prop="emergencyCountyLevel" label="县级" width="50" align="center"></el-table-column>
          </el-table-column>
          <el-table-column prop="fddbr" label="负责人" width="100" align="center"></el-table-column>
          <el-table-column prop="bgdh" label="联系电话" width="100" align="center"></el-table-column>
          <el-table-column label="日加工能力（吨）" align="center">
            <el-table-column prop="rjgnlMf" label="面粉" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlMf}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlDm" label="大米" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlDm}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlSyy" label="食用油" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlSyy}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rjgnlQt" label="其他" width="50" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.tzYjqyVO.rjgnlQt}}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <span
                :class="{'status-green':scope.row.status=='正常','status-red':scope.row.status=='注销'}"
              >{{scope.row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="修改时间" width="120" align="center"></el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="light" content="详情" placement="top">
                <el-button
                  @click.stop="modifyPop(scope.row,'show')"
                  type="primary"
                  size="primary"
                  class="button operate_show_btn"
                >
                  <i class="iconfont">&#xe67e;</i>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div class="pag-right clearFix">
      <el-pagination
        class="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formPage.page"
        :page-sizes="[10,20,30,40]"
        :page-size="formPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formPage.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import {
  budgetSubmissionByPage,
  budgetSubmissionDelete,
  budgetSubmissionSubmission,
  budgetSubmissionByPageOfAudit,
  getDataTree
} from "@/api/emergencyManagement/emergencyProcessingEnterprises/index";
import { uploadComponent, exportExcel } from "@/api/credit/index";

export default {
  data() {
    return {
      props: { multiple: true, expandTrigger: "hover" },
      options: [],
      dataValue: "",
      activeName: "first",
      form: {
        // reportYear: "",
        // reportMonth: ""
      },
      qyszqyValue: [],
      formPage: {
        page: 1,
        size: 10,
        total: 0
      },
      //列表数据
      tableData: [],
      //列表loading控制
      tableLoading: false,
      //状态
      findingsAuditObj: [
        {
          value: "正常",
          code: "1"
        },
        {
          value: "注销",
          code: "0"
        }
      ],
      idsArr: []
    };
  },
  watch: {
    $route(to, from) {
      this.routerChange();
      this.initTableData();
      this.getQyszqyDataTree();
    }
  },
  methods: {
    routerChange () {
      let routerStr = this.$router.history.current.path;
      if (
        routerStr ==
        "/emergencyManagement/supplyOutlets/provincialLevelSupply"
      ) {
        this.form.qyyjjb = "省级";
      } else if (
        routerStr ==
        "/emergencyManagement/supplyOutlets/leagueCitySupply"
      ) {
        this.form.qyyjjb = "市级";
      } else if (
        routerStr ==
        "/emergencyManagement/supplyOutlets/bannerCountySupply"
      ) {
        this.form.qyyjjb = "县级";
      }
    },
    //所在区域下拉框改变时
    qyszqyChange(qyszqyValue) {
      let arr = [];
      for (var i = 0; i < qyszqyValue.length; i++) {
        arr.push(qyszqyValue[i][2]);
      }
      this.form.qyszqybhs = arr;
      console.log(this.form.qyszqy);
    },
    reportFun() {
      this.$confirm("是否确认上报？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        budgetSubmissionDelete(row.id).then(response => {
          if (response.infoCode == "200") {
            this.$notify({
              title: "成功",
              message: "上报成功",
              type: "success",
              duration: 2000
            });
            this.initTableData();
          } else {
            this.$message({
              type: "error",
              message: response.msg
            });
          }
        });
      });
    },
    //导入
    onUpload(e) {
      uploadComponent(e).then(res => {
        this.$message({
          type: "success",
          message: res.msg
        });
        //          this.obj.accessoryID = res.data.data.id
        //          this.obj.accessoryURL = res.data.data.uri
        //          this.obj.kqTableName = res.data.data.name
        //          this.fileName = res.data.data.name
        // this.getAllInfoList()
        e.target.value = "";
      });
    },
    //导出
    exportFn() {
      if (this.idsArr.length > 0) {
        let arrs = this.idsArr.join(",");
        exportExcel(arrs).then(res => {
          this.idsArr = [];
          const resBlob = new Blob([res.data]);
          const fileName = "信用管理.xlsx";
          if ("download" in document.createElement("a")) {
            // 非IE下载
            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(resBlob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          } else {
            // IE10+下载
            navigator.msSaveBlob(resBlob, fileName);
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择要导出的数据"
        });
      }
    },
    chooseTable(val) {
      this.idsArr = [];
      val.map(item => {
        this.idsArr.push(item.id);
      });
      console.log(this.idsArr);
    },
    // 编辑
    modify(row, state) {
      this.$router.push({
        path: "bannerCountySupplyAdd",
        query: {
          id: row.id,
          state: state,
          row: row
        }
      });
    },
    //详情
    modifyPop(row, state) {
      this.$router.push({
        path: "bannerCountySupplyAdd",
        query: {
          id: row.id,
          state: state,
          row: row
        }
      });
    },
    //注销
    cancellation(row) {
      this.$confirm("是否注销该企业？", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning"
      }).then(() => {
        budgetSubmissionDelete(row.tyshxydm).then(response => {
          if (response.infoCode == "200") {
            this.$notify({
              title: "成功",
              message: "注销成功",
              type: "success",
              duration: 2000
            });
            this.initTableData();
          } else {
            this.$message({
              type: "error",
              message: response.msg
            });
          }
        });
      });
    },
    handleClick(tab, event) {
      this.form = {
        // reportYear: "",
        // reportMonth: ""
      };
      this.routerChange();
      this.formPage = {
        page: 1,
        size: 10,
        total: 0
      };
      this.qyszqyValue = [];
      if (tab.name == "first") {
        this.initTableData();
      } else {
        // this.initTableDataPop();
      }
    },
    //查询
    searchInfo() {
      this.initTableData();
    },
    //查询-汇总表
    searchInfoPop() {
      this.initTableDataPop();
    },
    //清空
    clearInfo() {
      // this.form.reportYear = "";
      // this.form.reportMonth = "";
      this.initTableData();
    },
    //分页大小
    handleSizeChange(val) {
      this.formPage.size = val;
      this.initTableData();
    },
    //分页页数
    handleCurrentChange(val) {
      this.formPage.page = val;
      this.initTableData();
    },
    //所属区域下拉框获取
    getQyszqyDataTree() {
      getDataTree().then(response => {
        if (response.infoCode == 200) {
          let data = response.data[0];
          console.log(data);
          let quData = [];
          quData[0] = {};
          quData[0].value = data.dictName;
          quData[0].label = data.dictName;
          quData[0].children = [];
          for (var i = 0; i < data.subDataDictionarys.length; i++) {
            quData[0].children[i] = {};
            quData[0].children[i].value = data.subDataDictionarys[i].dictName;
            quData[0].children[i].label = data.subDataDictionarys[i].dictName;
            quData[0].children[i].children = [];
            for (
              var j = 0;
              j < data.subDataDictionarys[i].subDataDictionarys.length;
              j++
            ) {
              quData[0].children[i].children[j] = {};
              quData[0].children[i].children[j].value =
                data.subDataDictionarys[i].subDataDictionarys[j].dictName;
              quData[0].children[i].children[j].label =
                data.subDataDictionarys[i].subDataDictionarys[j].dictName;
            }
          }
          this.options = quData;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
      });
    },
    //初始化列表数据
    initTableData() {
      this.tableLoading = true;
      budgetSubmissionByPage(this.form, this.formPage).then(response => {
        if (response.infoCode == 200) {
          this.tableData = response.data.list;
          //状态特殊处理开始
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].status == 1) {
              this.tableData[i].status = "正常";
            } else if (this.tableData[i].status == 0) {
              this.tableData[i].status = "注销";
            }
          }
          //状态特殊处理结束
          this.formPage.total = response.data.total;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
        this.tableLoading = false;
      });
    },
    //初始化列表数据-汇总表
    initTableDataPop() {
      this.tableLoading = true;
      budgetSubmissionByPageOfAudit(this.form, this.formPage).then(response => {
        if (response.infoCode == 200) {
          this.tableData = response.data.list;
          //状态特殊处理开始
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].status == 1) {
              this.tableData[i].status = "正常";
            } else if (this.tableData[i].status == 0) {
              this.tableData[i].status = "注销";
            }
          }
          //状态特殊处理结束
          this.formPage.total = response.data.total;
        } else {
          this.$message({
            type: "error",
            message: response.msg
          });
        }
        this.tableLoading = false;
      });
    }
  },
  created() {
    this.routerChange();
    this.initTableData();
    this.getQyszqyDataTree();
  }
};
</script>
<style scoped>
.el-input,
.el-select {
  width: 100% !important;
}
.outButtonPop {
  padding: 9.2px 27px;
  background: #145b9b;
  border-color: #145b9b;
}
.outButtonPop.el-button--primary:focus,
.outButtonPop.el-button--primary:hover {
  background-color: #038794;
  border-color: #038794;
}
.outButtonPop.el-button--primary.is-disabled,
.outButtonPop.el-button--primary.is-disabled:active,
.outButtonPop.el-button--primary.is-disabled:focus,
.outButtonPop.el-button--primary.is-disabled:hover {
  background-color: #aed6da;
  border-color: #aed6da;
}
.budgetSubmission-uploadBtn {
  padding: 8px 13px;
  height: 18px;
  font-size: 14px;
  color: #ffffff;
  background-color: #006bd5 !important;
  border-color: #006bd5;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
  top: 3px;
}
.budgetSubmission-uploadBtn input[type="file"] {
  display: none;
}
.budgetSubmission-button {
  padding: 8px 13px;
  background: #3fa9b5;
  border-color: #3fa9b5;
  margin-top: 4px;
  margin-left: 14px;
}
.budgetSubmission-exportButton {
  padding: 8px 13px;
  background: #3fa9b5;
  border-color: #3fa9b5;
  margin-top: 4px;
  margin-left: 8px;
}
#ml-9 {
  margin-left: 9px;
}
.click-css {
  color: #0029ff;
  cursor: pointer;
}
.status-green {
  color: #08e008;
}
.status-red {
  color: red;
}
</style>
