<template>
  <div class="content-main">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline search-form"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="承储企业:">
          <el-input
            class="inputCompatible"
            clearable
            v-model="formInline.sskdmc"
            style="width: 170px"
            placeholder="支持模糊查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="协议编号:">
          <el-input
            class="inputCompatible"
            clearable
            v-model="formInline.xybh"
            style="width: 170px"
            placeholder="支持模糊查询"
          ></el-input>
        </el-form-item>

        <el-form-item class="search-button">
          <span class="search-line"></span>
          <div class="search-select" @click="searchShowMore">
            更多条件
            <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"
            @click="doSearch"
            size="small"
            class="iconfont iconchaxun"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="doReset"
            size="small"
            class="iconfont iconzhongzhi"
            >重置</el-button
          >
        </el-form-item>
      </el-row>
      <el-row v-show="searchShowMoreBool">
        <el-form-item label="品种:">
          <el-cascader
            clearable
            class="inputCompatible"
            :options="pzOptions"
            :props="pzProps"
            :show-all-levels="false"
            v-model="formInline.pzbm"
            placeholder="请选择"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="处理方式:" v-if="type == 1">
          <el-select clearable v-model="formInline.clfs" placeholder="请选择">
            <el-option
              v-for="item in clfsoptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-button
        type="warning"
        size="small"
        @click="msgDialogVisible = true"
        style="position: absolute; top: 24px; right: 10px"
        >预警说明</el-button
      >
      <el-dialog
        title="预警说明"
        size="small"
        :visible.sync="msgDialogVisible"
        width="35%"
        top="30vh"
        :modal="false"
      >
        <div>
          <span>1、距离架空期截止日15天/7天未完成轮换，黄色预警提示。</span
          ><br /><br />
          <span>2、距离架空期截止日1天，红色预警提示。</span>
        </div>
      </el-dialog>
    </el-form>
    <el-row>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          align="center"
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column
          align="left"
          width="200"
          prop="sskdmc"
          label="承储企业"
          v-if="type == 0"
        >
          <template slot-scope="scope">
            <img v-if="scope.row.yjts == 1" src="./red.png" />
            <img v-if="scope.row.yjts > 1" src="./yellow.png" />
            <span>{{ scope.row.sskdmc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          prop="sskdmc"
          label="承储企业"
          v-if="type == 1"
        >
        </el-table-column>
        <el-table-column
          width="105"
          align="center"
          prop="xybh"
          label="协议编号"
        >
          <template slot-scope="scope">
            <span
              style="color: blue; cursor: pointer"
              @click="goDetail(scope.row)"
              >{{ scope.row.xybh }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="lhnd"
          label="轮换年度"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lspzmc"
          label="品种"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="jkqzt"
          label="架空期状态"
        ></el-table-column>
        <el-table-column align="center" width="170" prop="pzmc" label="架空期">
          <template slot-scope="scope">
            {{ scope.row.scjsr }}—{{ scope.row.jzr }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="ylrsl"
          label="截止日前应轮入数量(吨)"
        >
          <template slot-scope="scope">
            {{
              String(scope.row.ylrsl).indexOf(".") > -1
                ? Number(scope.row.ylrsl).toFixed(3)
                : scope.row.ylrsl
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sysl" label="剩余应轮入数量(吨)">
          <template slot-scope="scope">
            {{
              String(scope.row.sysl).indexOf(".") > -1
                ? Number(scope.row.sysl).toFixed(3)
                : scope.row.sysl
            }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bjsj" label="报警日期">
        </el-table-column>
        <el-table-column
          align="center"
          prop="clfs"
          label="处理方式"
          v-if="type == 1"
        >
        </el-table-column>
        <el-table-column align="center" label="操作" width="70">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看"
              placement="top"
              v-if="type == 1"
            >
              <el-button
                type="primary"
                size="small"
                class="operate_show_btn iconfont iconchakan2"
                @click="handleDetail(scope.row, 0)"
              ></el-button>
            </el-tooltip>

            <el-tooltip
              class="item"
              effect="light"
              content="处理"
              placement="top"
              v-if="buttonNameList.indexOf('处理') > -1 && type == 0"
            >
              <el-button
                type="primary"
                @click="handleDetail(scope.row, 1)"
                class="operate_edit_btn iconfont iconchuli"
                size="small"
              ></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.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="formDetail"
        label-width="100px"
        :rules="rule"
        ref="formDetail"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理人:">
              <el-input
                disabled
                class="inputCla"
                clearable
                v-model="formDetail.clr"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理时间:">
              <el-input
                class="inputCla"
                disabled
                v-model="formDetail.clsj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="处理意见:" prop="yj">
              <el-input
                class="inputClaBig"
                type="textarea"
                clearable
                :disabled="showFlag"
                v-model="formDetail.yj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="!showFlag"
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="save"
          >保存</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectList,
  alarmUpdate,
} from "@/api/earlyWarning/overheadWarning/index";
import { authorityControl, getVarietyList } from "@/api/login/login.js";
import { getNowDate } from "@/utils/index";

export default {
  props: ["type"],
  data() {
    return {
      clfsoptions: [
        { name: "手动处理", code: "2" },
        { name: "自动处理", code: "1" },
      ],
      msgDialogVisible: false,
      dialogVisible: false,
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "subDataDictionarys",
        // checkStrictly: true,
        emitPath: false,
      },
      searchShowMoreBool: false,
      listLoading: true,
      formInline: {
        xybh: "",
        pzbm: "",
        sskdmc: "",
        clfs: "",
        zt: "",
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      kdOptions: [], // 库点名称列表
      pzOptions: [], // 品种列表
      tableData: [],
      buttonNameList: [],
      formDetail: {
        clr: "",
        clsj: "",
        yj: "",
      },
      showFlag: true,
      rule: {
        yj: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    goDetail(row) {
      this.$router.push({
        name: "overheadWarningDetail",
        query: {
          state: 1,
          lhxybm: row.lhxybm,
          data: JSON.stringify(row),
          type: this.type,
        },
      });
    },
    doReset() {
      this.formInline = {
        xybh: "",
        pzbm: "",
        clfs: "",
        sskdmc: "",
      };
      this.doSearch();
    },
    doSearch() {
      this.pageForm.page = 1;
      this.listLoading = true;
      this.getList();
    },
    getButtonList() {
      let codeData = {
        resourceCode: sessionStorage.getItem("resourceCode"),
        userId: sessionStorage.getItem("userCode"),
      };
      authorityControl(codeData).then((res) => {
        res.data.forEach((item) => {
          this.buttonNameList.push(item.resourceName);
        });
        this.getList("start");
      });
    },
    getList(type) {
      if (type != "start") {
        //非初始化调用：查询、分页
        sessionStorage.setItem("searchData", JSON.stringify(this.formInline));
        sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
      } else {
        //初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
        if (JSON.parse(sessionStorage.getItem("searchData"))) {
          //详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
          this.formInline = JSON.parse(sessionStorage.getItem("searchData"));
          this.pageForm = JSON.parse(sessionStorage.getItem("pageData"));
        } else {
          //第一次进去此菜单时，保存上方默认的data
          sessionStorage.setItem("searchData", JSON.stringify(this.formInline));
          sessionStorage.setItem("pageData", JSON.stringify(this.pageForm));
        }
      }
      //   // 把字符串转为null , 后台现处理不了空字符
      //   Object.keys(this.formInline).forEach((k) => {
      //     if (this.formInline[k] === "") {
      //       this.formInline[k] = null;
      //     }
      //   });
      let data = {
        ...this.formInline,
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        zt: this.type,
        // skqrzts: Object.keys(status), // 限制列表只展示已确认(通过), 已通知, 财务已确认(业务待确认)
        // rotateType: this.activeName == 'baog' ? '1' : '2'
      };
      console.log(this.formInline, "formInline");
      selectList(data)
        .then((res) => {
          this.listLoading = false;
          if (res.infoCode === 200) {
            this.tableData = res.data.items;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.currentPage;
            return;
          }
          this.$message.error("获取数据失败");
        })
        .catch((err) => {
          this.listLoading = false;
          this.$message.error("获取数据失败");
        });
    },
    handleDetail(row, state) {
      this.formDetail.id = row.id;
      if (state) {
        this.showFlag = false;
        this.formDetail.clsj = getNowDate();
        this.formDetail.clr = sessionStorage.getItem("userName");
      } else {
        this.showFlag = true;
        this.formDetail.clsj = row.clsj;
        this.formDetail.clr = row.clr;
        this.formDetail.yj = row.yj;
      }
      this.dialogVisible = true;
    },
    save() {
      this.$refs.formDetail.validate((valid) => {
        if (valid) {
          let data = {
            type: "jkqyj",

            ...this.formDetail,
          };
          alarmUpdate(data)
            .then((res) => {
              if (res.infoCode == 200) {
                this.$message({ type: "success", message: "保存成功！" });
                this.dialogVisible = false;
                this.getList();
              } else {
                this.$message({ type: "error", message: res.message });
              }
            })
            .catch((res) => {
              this.$message({ type: "error", message: "保存失败！" });
            });
        }
      });
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList();
    },
    searchShowMore() {
      this.searchShowMoreBool = !this.searchShowMoreBool;
    },
    async getVarieties() {
      let res = await getVarietyList();
      if (res.infoCode === 200) {
        this.pzOptions = res.data;
        return;
      }
      this.$message.error(res.msg || "获取品种列表失败");
    },
  },
  // created() {
  //   this.getButtonList();
  //   this.getVarieties();
  // },
};
</script>

<style lang="scss" scoped>
.inputCla {
  width: 90%;
}
.inputClaBig {
  width: 96%;
}
</style>
