<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.ccqy"
            style="width: 170px"
            placeholder="模糊查询库点名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="仓号:">
          <el-input
            class="inputCompatible"
            clearable
            v-model="formInline.cfmc"
            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" v-if="type == 1">
            更多条件
            <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-select v-model="formInline.clfs" placeholder="请选择" clearable>
            <el-option label="手动处理" :value="0"></el-option>
            <el-option label="自动处理" :value="1"></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"
      >
        <span
          >以下为库存数量大于核定仓容的仓房，请及时采取措施。</span
        >
      </el-dialog>
    </el-form>
    <el-row>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column
          align="center"
          min-width="240"
          prop="ccqy"
          label="承储企业"
          show-overflow-tooltip
        >
          <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.ccqy }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="105"
          align="center"
          prop="cfmc"
          label="仓房名称"
        >
        </el-table-column>
        <el-table-column
          min-width="215"
          show-overflow-tooltip
          align="center"
          prop="lyxz"
          label="粮油性质"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="pzmx"
          show-overflow-tooltip
          label="品种明细"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="scnf"
          label="生产年份"
        ></el-table-column>
        <el-table-column
          width="130"
          align="center"
          prop="hdcr"
          label="核定仓容/罐容(吨)"
        >
          <template slot-scope="scope">
            <span>{{!parseFloat(scope.row.hdcr) ? "" :(Number.isInteger(scope.row.hdcr) ? scope.row.hdcr : parseFloat(scope.row.hdcr).toFixed(3))}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          align="center"
          prop="kcsl"
          label="库存数量(吨)"
        >
          <template slot-scope="scope">
            <span>{{!parseFloat(scope.row.kcsl) ? "" :(Number.isInteger(scope.row.kcsl) ? scope.row.kcsl : parseFloat(scope.row.kcsl).toFixed(3))}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="bjsj"
          width="120"
          show-overflow-tooltip
          label="报警日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="clfs"
          label="处理方式"
          v-if="type == 1"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.clfs == 0 ? "手动处理" : "自动处理" }}</span>
          </template>
        </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" :close-on-click-modal="false" 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.clrmc"
              ></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="clyj">
              <el-input
                class="inputClaBig"
                type="textarea"
                clearable
                :disabled="showFlag"
                v-model="formDetail.clyj"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconbaocun"
          size="small"
          @click="save"
          v-if="type == 0"
          >保存</el-button
        >
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisible = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

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

export default {
  props: ["type"],
  data() {
    return {
      msgDialogVisible: false,
      dialogVisible: false,
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "subDataDictionarys",
        // checkStrictly: true,
        emitPath: false,
      },
      searchShowMoreBool: false,
      listLoading: true,
      formInline: {
        ccqy: "",
        cfmc: "",
        clfs: "",
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      kdOptions: [], // 库点名称列表
      pzOptions: [], // 品种列表
      tableData: [],
      buttonNameList: [],
      formDetail: {
        clrmc: "",
        clsj: "",
        clyj: "",
      },
      showFlag: true,
      rule: {
        clyj: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  methods: {
    doReset() {
      this.formInline = {
        ccqy: "",
        cfmc: "",
        clfs: "",
      };
      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,
        clzt: this.type,
      };
      alarmList(data)
        .then((res) => {
          this.listLoading = false;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.pageNum;
            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.clrmc = sessionStorage.getItem("userName");
        this.formDetail.clyj = "";
      } else {
        this.showFlag = true;
        this.formDetail.clsj = row.clsj;
        this.formDetail.clrmc = row.clrmc;
        this.formDetail.clyj = row.clyj;
      }
      this.dialogVisible = true;
    },
    save() {
      this.$refs.formDetail.validate((valid) => {
        if (valid) {
          let data = {
            ...this.formDetail,
          };
          alarmUpdate(data)
            .then((res) => {
              if (res.code == 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;
    },
  },
  // created() {
  //   this.getButtonList();
  // },
};
</script>

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