<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.cch"
            style="width: 170px"
            placeholder="支持模糊查询"
          ></el-input>
        </el-form-item>
        <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-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 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-date-picker
            v-model="crksj"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </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>以下车牌疑似转圈粮：</span><br /><br />
          <span
            >&emsp;&emsp;
            三天内同一个车牌号、同样的明细品种、出入不同的库。</span
          >
        </div>
      </el-dialog>
    </el-form>
    <el-row>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :span-method="objectSpanMethod"
      >
        <el-table-column align="center" label="序号" width="50" type="index">
          <template slot-scope="scope">
            {{ scope.row.xh }}
          </template>
        </el-table-column>
        <el-table-column align="center" width="120" prop="cch" label="车牌号">
        </el-table-column>
        <el-table-column
          align="center"
          width="200"
          prop="sskdmc"
          label="承储库"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="cfmc"
          label="仓房名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="crksj"
          width="180"
          label="出入库时间"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lspzmc"
          label="品种"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lydjmc"
          label="等级"
        ></el-table-column>
        <!-- <el-table-column align="center" prop="pzmc" label="架空期">
          <template slot-scope="scope">
            {{ scope.row.scjsr }}——{{ scope.row.jzr }}
          </template>
          
        </el-table-column> -->
        <el-table-column align="center" prop="jz" label="净重(公斤)">
          <template slot-scope="scope">
            {{
              String(scope.row.jz).indexOf(".") > -1
                ? Number(scope.row.jz).toFixed(3)
                : scope.row.jz
            }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="80"
          prop="crklx"
          label="出入库类型"
        >
        </el-table-column>
        <!-- <el-table-column
          v-if="type == 1"
          align="center"
          prop="clfs"
          label="处理方式"
        >
        </el-table-column> -->

        <!-- <el-table-column align="center" prop="bjsj" label="查看图片" width="80">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="查看图片"
              placement="top"
            >
              <el-button
                type="primary"
                size="small"
                class="operateTp iconfont iconchakan2"
                @click="handleDetailTp(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="50">
          <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="[5, 10, 20, 30]"
        :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>
    <el-dialog
      title="查看图片"
      :visible.sync="dialogVisibleTp"
      width="50%"
      v-loading.fullscreen.lock="jjtpcxLoading"
    >
      <el-form
        :model="formDetail"
        label-width="100px"
        :rules="rule"
        ref="formDetail"
      >
        <el-row> </el-row>
        <el-row>
          <el-col :span="24" v-if="jjtpcxList.length && jjtpcxList.length > 0">
            <div class="pic-show">
              <!-- <img src="@/assets/t1.jpg" alt=""> -->
              <img :src="imgShowUrl" alt="" />
            </div>
            <div class="pic-tab">
              <svg
                @click="listChange('left')"
                t="1689594288039"
                class="icon icon-left"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="871"
                width="200"
                height="200"
              >
                <path
                  d="M393.390114 512.023536l347.948667-336.348468c20.50808-19.85828 20.50808-51.997258 0-71.792093-20.507056-19.826558-53.778834-19.826558-74.28589 0L281.990954 476.135164c-20.476357 19.826558-20.476357 51.981908 0 71.746044l385.061936 372.236839c10.285251 9.91379 23.728424 14.869662 37.173644 14.869662 13.446243 0 26.889417-4.956895 37.112246-14.901385 20.50808-19.826558 20.50808-51.919487 0-71.746044L393.390114 512.023536"
                  p-id="872"
                ></path>
              </svg>
              <div class="tab-content">
                <ul>
                  <li
                    v-for="(item, index) in jjtpcxList"
                    :key="index"
                    :class="{ 'active-tab': activeTab == index }"
                    @click="activeShow(index)"
                  >
                    <img :src="item.url" alt="" />
                  </li>
                </ul>
              </div>
              <svg
                @click="listChange('right')"
                t="1689594321717"
                class="icon icon-right"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1019"
                width="200"
                height="200"
              >
                <path
                  d="M629.963157 511.976464 282.01449 848.324932c-20.50808 19.85828-20.50808 51.997258 0 71.792093 20.507056 19.826558 53.778834 19.826558 74.28589 0l385.061936-372.252189c20.47738-19.825534 20.47738-51.981908 0-71.745021L356.30038 103.882975c-10.285251-9.91379-23.728424-14.869662-37.173644-14.869662-13.446243 0-26.889417 4.956895-37.112246 14.901385-20.50808 19.826558-20.50808 51.919487 0 71.746044L629.963157 511.976464"
                  p-id="1020"
                ></path>
              </svg>
            </div>
          </el-col>
          <el-col :span="24" v-else style="height: 40px; line-height: 40px">
            <h2>未检测到对应图片，请联系检斤工作人员。</h2>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="iconfont iconfanhui"
          size="small"
          @click="dialogVisibleTp = false"
          >返回</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  selectList,
  alarmUpdate,
  jjtpcxList,
} from "@/api/earlyWarning/violationWarning/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" },
      ],
      jjtpcxList: [],
      msgDialogVisible: false,
      dialogVisible: false,
      pzProps: {
        label: "dictName",
        value: "dictCode",
        children: "subDataDictionarys",
        // checkStrictly: true,
        emitPath: false,
      },
      searchShowMoreBool: false,
      listLoading: true,
      formInline: {
        pzbm: "",
        sskdmc: "",
        cch: "",
        zt: "",
        clfs: "",
      },
      crksj: [],
      pageForm: {
        page: 1,
        size: 5,
        total: 0,
      },
      kdOptions: [], // 库点名称列表
      pzOptions: [], // 品种列表
      tableData: [],
      buttonNameList: [],
      formDetail: {
        clr: "",
        clsj: "",
        yj: "",
      },
      showFlag: true,
      rule: {
        yj: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      spanArr: [],
      rowIndex: 1,
      dialogVisibleTp: false,
      jjtpcxParams: {
        pageNum: 1,
        pageSize: 5,
      },
      activeTab: 0, //选中下标
      jjtpcxList: [], //图片列表
      jjtpcxShowList: [],
      imgShowUrl: "", //选中图片路径
      jjtpcxLoading: false,
      bizno: "",
    };
  },
  methods: {
    handleDetailTp(row) {
      this.bizno = row.bizno;
      this.jjtpcxSearch(1);
    },
    jjtpcxSearch(type) {
      this.jjtpcxLoading = true;
      let data = {
        bizno: this.bizno,
        // bizno: "qcrk_06820230616022",
      };
      jjtpcxList(data, this.jjtpcxParams)
        .then((res) => {
          if (res.code == 200) {
            if (res.data.length == 0) {
              if (this.jjtpcxParams.pageNum > 1) {
                this.jjtpcxParams.pageNum = 1;
                this.jjtpcxSearch();
                this.$message({
                  type: "warning",
                  message: "已返回第一页",
                });
              } else {
                this.jjtpcxList = [];
                this.imgShowUrl = "";
              }
            } else {
              this.jjtpcxList = res.data;
              this.imgShowUrl = this.jjtpcxList[this.activeTab].url;
            }
          }
          this.jjtpcxLoading = false;
          if (type) {
            this.dialogVisibleTp = true;
          }
        })
        .catch((e) => {
          console.log(e, "errrrrrrrror");
          this.$message({
            type: "error",
            message: "暂无图片",
          });
          this.jjtpcxLoading = false;
        });
    },
    activeShow(index) {
      this.activeTab = index;
      this.imgShowUrl = this.jjtpcxList[this.activeTab].url;
    },
    // 检斤图片查询-切换列表
    listChange(val) {
      this.activeTab = 0;
      if (val == "left") {
        if (this.jjtpcxParams.pageNum > 1) {
          this.jjtpcxParams.pageNum--;
          this.jjtpcxSearch();
        } else {
          this.$message({
            type: "warning",
            message: "已到达第一页",
          });
        }
      }
      if (val == "right") {
        this.jjtpcxParams.pageNum++;
        this.jjtpcxSearch();
      }
    },
    // table合并列
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0 || columnIndex == 1 || columnIndex == 9) {
        console.log(row.cch, "row.cch");
        let data = this.tableData; //拿到当前table中数据
        let cellValue = row.cch; //当前位置的值
        let noSortArr = [];
        data.map((item) => {
          noSortArr.push(item.cch);
        });
        noSortArr = Array.from(new Set(noSortArr));
        // let noSortArr = ['num1', 'num2', 'num3', 'num4', 'num5', 'num6']; //不需要合并的字段（不进行合并行的prop）
        if (cellValue && !noSortArr.includes(column.property)) {
          let prevRow = data[rowIndex - 1]; //获取到上一条数据
          let nextRow = data[rowIndex + 1]; //下一条数据
          if (prevRow && prevRow.cch === cellValue) {
            //当有上一条数据，并且和当前值相等时
            return { rowspan: 0, colspan: 0 };
          } else {
            let countRowspan = 1;
            while (nextRow && nextRow.cch === cellValue) {
              //当有下一条数据并且和当前值相等时,获取新的下一条
              nextRow = data[++countRowspan + rowIndex];
              // if(columnIndex==0){

              // }
            }
            if (countRowspan > 1) {
              if (columnIndex == 0) {
                console.log(
                  rowIndex,
                  countRowspan,
                  this.tableData[rowIndex + countRowspan]
                );
                if (this.tableData[rowIndex + countRowspan]) {
                  this.tableData[rowIndex + countRowspan].xh =
                    this.tableData[rowIndex].xh + 1;
                }
              }
              return { rowspan: countRowspan, colspan: 1 };
            }
          }
        }
      }
    },
    doReset() {
      this.formInline = {
        pzbm: "",
        sskdmc: "",
        cch: "",
        clfs: "",
      };
      (this.crksj = []), 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) {
      this.formInline.startDate = this.crksj.length > 0 ? this.crksj[0] : "";
      this.formInline.endDate = this.crksj.length > 0 ? this.crksj[1] : "";
      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) {
            res.data.items.forEach((item, index) => {
              console.log(item, index);
              this.$set(item, "xh", index + 1);
            });
            this.tableData = res.data.items;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.currentPage;
            // this.getSpanArr(this.tableData)
            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.clsj;
        this.formDetail.yj = row.yj;
      }
      this.dialogVisible = true;
    },
    save() {
      this.$refs.formDetail.validate((valid) => {
        if (valid) {
          let data = {
            type: "wgyj",

            ...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%;
}
.pic-show {
  padding: 10px 40px;
  text-align: center;
  img {
    max-height: 500px;
    width: auto;
    max-width: 100%;
  }
}
.pic-tab {
  padding: 0 40px;
  display: flex;
  height: 150px;
  justify-content: space-between;
  align-items: center;

  .icon-left,
  .icon-right {
    width: 50px;
    height: 50px;
    cursor: pointer;
  }
  .tab-content {
    width: 100%;
    height: 100%;
    ul {
      display: flex;
      justify-content: space-around;
      height: 100%;
      li {
        width: 16%;
        height: 100%;
        background: #cccccc;
        cursor: pointer;
        padding: 6px 10px;
        border: 1px solid transparent;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .active-tab {
        border: 1px solid #0e75cf;
        background: #0e75cf;
      }
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.operateTp {
  background-color: #24ac43 !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  font-size: 13px;
}
</style>
