<template>
  <div class="content-main">
    <el-form
      ref="searchForm"
      :inline="true"
      :model="searchForm"
      class="search-bm-boder"
      label-position="left"
    >
      <el-row>
        <el-form-item label="编号:" prop="gdbh">
          <el-input
            v-model="searchForm.gdbh"
            clearable
            placeholder="请输入编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请单位:" prop="sqdwmc">
          <el-input
            v-model="searchForm.sqdwmc"
            clearable
            placeholder="请输入申请单位"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="类型:" prop="workOrderType">
          <el-select
            v-model="searchForm.workOrderType"
            style="width: 170px"
            clearable
            placeholder="请选择类型"
          >
            <el-option
              v-for="item in workOrderTypeOptions"
              :key="item.dictCode"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="情况描述:" prop="offLineDesc">
          <el-input
            v-model="searchForm.offLineDesc"
            clearable
            placeholder="请输入情况描述"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="系统名称:" prop="webSysName">
          <el-select
            v-model="searchForm.webSysName"
            style="width: 170px"
            clearable
            placeholder="请选择系统名称"
            >
            <el-option
              v-for="item in systemNameOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item>
          <div class="search-button">
            <span class="search-line"></span>
            <div
              class="search-select"
              @click="searchShowMoreBool = !searchShowMoreBool"
            >
              更多条件
              <i class="el-icon-arrow-up" v-show="searchShowMoreBool"></i>
              <i class="el-icon-arrow-down" v-show="!searchShowMoreBool"></i>
            </div>
            <el-button
              type="primary"
              size="small"
              class="iconfont iconchaxun"
              @click="searchInfo"
              >查询</el-button
            >
            <el-button
              type="primary"
              @click="resetInfo('searchForm')"
              size="small"
              class="iconfont iconzhongzhi"
            >
              重置</el-button
            >
          </div>
        </el-form-item>
      </el-row>
      <el-row v-show="searchShowMoreBool">
        <el-form-item label="状态:" prop="shztmc">
          <el-select
            v-model="searchForm.shztmc"
            style="width: 170px"
            clearable
            placeholder="请选择状态"
          >
            <el-option
              v-for="item in shztOptions"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间:" prop="verifySealDate">
          <el-date-picker
            v-model="searchForm.verifySealDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row class="addBtnBg">
      <el-button
        type="primary"
        class="iconfont icondaochu11"
        size="mini"
        @click="handleExport"
        >导出</el-button
      >
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        stripe
        border
        fit
        id="out-table"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="序号" width="70">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="gdbh"
          show-overflow-tooltip
          width="110"
          label="编号"
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="workOrderTypeName"
          label="类型"
          width="80"
          show-overflow-tooltip
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="sqdwmc"
          show-overflow-tooltip
          label="申请单位"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="offLineDesc"
          label="情况描述"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column
          align="center"
          prop="webSysName"
          label="系统名称"
          show-overflow-tooltip
        >
        </el-table-column> -->
        <el-table-column
          width="105"
          align="center"
          prop="cameraAmount"
          label="离线设备数量"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="shztmc"
          label="状态"
          width="140"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="verifySealDate"
          label="提交时间"
          width="110"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="acceptDate"
          label="申请离线时间"
          width="190"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.offLineDateBegin }}——{{ scope.row.offLineDateEnd }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看"
              placement="top"
            >
              <el-button
                @click="handleClick(scope.row, 0)"
                type="primary"
                size="small"
                class="operate_show_btn iconfont iconchakan2"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="备案"
              placement="top"
              v-if="
                buttonNameList.indexOf('待区粮办备案') > -1 ||
                buttonNameList.indexOf('待储备公司备案') > -1
              "
            >
              <el-button
                @click="handleClick(scope.row, 'qlbsh')"
                type="primary"
                class="operate_edit_btn iconfont iconqueren"
                v-show="
                  scope.row.shzt == '91000031' || scope.row.shzt == '91000030'
                "
                size="small"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="备案"
              placement="top"
              v-if="buttonNameList.indexOf('待市储备处备案') > -1"
            >
              <el-button
                @click="handleClick(scope.row, 'scbcba')"
                type="primary"
                class="operate_edit_btn iconfont iconqueren"
                v-show="
                  scope.row.shzt == '91000040' || scope.row.shzt == '91000041'
                "
                size="small"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="备案"
              placement="top"
              v-if="buttonNameList.indexOf('待信息中心备案') > -1"
            >
              <el-button
                @click="handleClick(scope.row, 'xxzxba')"
                type="primary"
                class="operate_edit_btn iconfont iconqueren"
                v-show="scope.row.shzt == '91000050'"
                size="small"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="导出"
              placement="top"
            >
              <el-button
                @click="handleClick(scope.row, 'dc')"
                type="primary"
                size="small"
                class="operate_edit_btn iconfont icondaochu11"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { authorityControl } from "@/api/login/login";
import {
  selectPageByEntity,
  exportDataOffLineExcel,
} from "@/api/operationServices/offlineFiling/index.js";
import {
  findYWRYPDictCode,
  removeList,
} from "@/api/operationServices/operationOrder/index.js";
export default {
  data() {
    return {
      searchShowMoreBool: false,
      buttonNameList: [],
      searchForm: {
        gdbh: "",
        sqdwmc: "",
        offLineDesc: "",
        verifySealDate: [],
        shztmc: "",
      },
      workOrderTypeOptions: [],
      systemNameOptions: [
        {
          code: "1",
          name: "天津智能出入库系统",
        },
        {
          code: "2",
          name: "天津市企业服务平台",
        },

        {
          code: "3",
          name: "天津智能粮库业务平台",
        },
        {
          code: "4",
          name: "市级综合粮食管理和服务平台",
        },
      ], //系统名称list
      shztOptions: [
        {
          code: "91000010",
          name: "待审核",
        },
        {
          code: "91000020",
          name: "待盖章",
        },
        {
          code: "91000030",
          name: "待区粮办备案",
        },
        {
          code: "91000030",
          name: "待中粮利金备案",
        },
        {
          code: "91000030",
          name: "待利达粮油备案",
        },
        {
          code: "91000030",
          name: "待市储备公司备案",
        },
        {
          code: "91000040",
          name: "待市储备处备案",
        },
        {
          code: "91000050",
          name: "待信息中心备案",
        },
        {
          code: "91000060",
          name: "已完成",
        },
        {
          code: "91000011",
          name: "盖章驳回",
        },
        {
          code: "91000001",
          name: "审核驳回",
        },
        {
          code: "91000021",
          name: "区粮办驳回",
        },
        {
          code: "91000021",
          name: "中粮利金驳回",
        },
        {
          code: "91000021",
          name: "利达粮油驳回",
        },
        {
          code: "91000021",
          name: "市储备公司驳回",
        },
        {
          code: "91000031",
          name: "市储备处驳回",
        },
        {
          code: "91000041",
          name: "信息中心驳回",
        },
      ],
      pageForm: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  created() {
    this.getButtonList(
      sessionStorage.getItem("resourceCode"),
      sessionStorage.getItem("userCode")
    );
    // findYWRYPDictCode("YWDLX").then((res) => {
    //   if (res.infoCode == 200) {
    //     this.workOrderTypeOptions = res.data;
    //   } else {
    //     this.$message.error(res.msg);
    //   }
    // });
  },
  methods: {
    //导出
    handleExport() {
      let data = {
        gdbh: this.searchForm.gdbh,
        sqdwmc: this.searchForm.sqdwmc,
        offLineDesc: this.searchForm.offLineDesc,
        verifySealDateBegin:
          this.searchForm.verifySealDate.length > 0
            ? this.searchForm.verifySealDate[0]
            : "",
        verifySealDateEnd:
          this.searchForm.verifySealDate.length > 0
            ? this.searchForm.verifySealDate[1]
            : "",
        // webSysName:this.searchForm.webSysName,
        shztmc: this.searchForm.shztmc,
        pageType: 3,
      };
      if (
        this.buttonNameList.indexOf("待储备公司备案") > -1 ||
        this.buttonNameList.indexOf("待区粮办备案") > -1
      ) {
        data.pageType = 2;
      }
      if (this.buttonNameList.indexOf("待市储备处备案") > -1) {
        data.pageType = 3;
      }
      console.log(this.buttonNameList);
      if (this.buttonNameList.indexOf("待信息中心备案") > -1) {
        data.pageType = 4;
      }
      exportDataOffLineExcel(data)
        .then((response) => {
          let exportName = "设备离线故障情况备案表";
          let blob = new Blob([response], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
          });
          if (!!window.ActiveXObject || "ActiveXObject" in window) {
            window.navigator.msSaveOrOpenBlob(blob, exportName);
          } else {
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            link.setAttribute("download", exportName);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        })
        .catch();
    },
    searchShowMore() {
      this.searchShowMoreBool = !this.searchShowMoreBool;
    },
    //获取按钮权限
    getButtonList(menuCode, userCode) {
      let codeData = {
        resourceCode: menuCode,
        userId: userCode,
      };
      authorityControl(codeData).then((res) => {
        let buttonNameList = [];
        res.data.forEach((item) => {
          this.buttonNameList.push(item.resourceName);
        });
        this.getList("start");
      });
    },
    getList(type) {
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(this.searchForm));
        sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          this.searchForm = JSON.parse(sessionStorage.getItem("searchData"));
          this.pageForm = JSON.parse(sessionStorage.getItem("pageData"));
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(this.searchForm));
          sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
        }
      }
      let data = {
        gdbh: this.searchForm.gdbh,
        sqdwmc: this.searchForm.sqdwmc,
        offLineDesc: this.searchForm.offLineDesc,
        verifySealDateBegin:
          this.searchForm.verifySealDate.length > 0
            ? this.searchForm.verifySealDate[0]
            : "",
        verifySealDateEnd:
          this.searchForm.verifySealDate.length > 0
            ? this.searchForm.verifySealDate[1]
            : "",
        // webSysName:this.searchForm.webSysName,
        shztmc: this.searchForm.shztmc,
        pageSize: this.pageForm.pageSize,
        pageNum: this.pageForm.pageNum,
        pageType: 3,
      };

      if (
        this.buttonNameList.indexOf("待储备公司备案") > -1 ||
        this.buttonNameList.indexOf("待区粮办备案") > -1
      ) {
        data.pageType = 2;
      }
      if (this.buttonNameList.indexOf("待市储备处备案") > -1) {
        data.pageType = 3;
      }
      console.log(this.buttonNameList);
      if (this.buttonNameList.indexOf("待信息中心备案") > -1) {
        data.pageType = 4;
      }
      selectPageByEntity(data).then((res) => {
        if (res.infoCode == 200) {
          this.pageForm.total = res.data.total;

          this.tableData = res.data.items;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //查询
    searchInfo() {
      this.pageForm.pageNum = 1;
      this.getList();
    },

    //重置
    resetInfo(searchForm) {
      this.$refs[searchForm].resetFields();
      this.pageForm.pageNum = 1;
      this.getList();
    },
    //查看
    handleClick(row, type) {
      this.$router.push({
        name: "offlineFilingDetail",
        query: {
          shzt: row.shzt,
          fid: row.fid,
          type: type == "0" ? "CK" : type == "zj" ? "zj" : type,
        },
      });
    },
    //新增运维单
    addclick() {
      this.$router.push({
        name: "offlineFilingDetail",
        query: {
          shzt: "add",
        },
      });
    },
    handleSizeChange(val) {
      this.pageForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.pageNum = val;
      this.getList();
    },
    deleteRow(row) {
      let data = {
        fid: row.fid,
      };
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeList(data)
          .then((response) => {
            if (response.infoCode == 200) {
              this.getList();
              this.$message({
                showClose: true,
                message: "删除成功！",
                type: "success",
              });
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    },
  },
  beforeCreate() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.line {
  border-bottom: 1px solid #000;
}
.iconfont {
  color: white;
}
.title {
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
}

.text {
  text-align: center;
}

.iconfont {
  font-size: 13px;
}
.addTable {
  text-align: right;
  margin-right: 50px;
}

.addTable span {
  font-size: 20px;
  font-weight: bold;
  color: #4588db;
  cursor: pointer;
}
</style>
<style>
</style>
