  <template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="物资柜" prop="loanFromId">
          <el-select
            :disabled="visibleSelect"
            style="width: 215px"
            v-model="queryParams.loanFromId"
            placeholder="请选择物资柜"
            clearable
          >
            <el-option
              v-for="dict in cabinets"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="物资名称" prop="materialsName">
          <el-input
            v-model="queryParams.materialsName"
            placeholder="请输入物资名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="物资类型" prop="materialsTypeId">
          <treeselect
            style="width: 215px"
            v-model="queryParams.materialsTypeId"
            :options="machinerytypeOptions"
            :normalizer="normalizer"
            placeholder="请选择物资类型"
          />
        </el-form-item>
        <el-form-item label="领取人" prop="loanUserName">
          <el-input
            v-model="queryParams.loanUserName"
            placeholder="请输入领取人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="领取时间" prop="">
          <el-date-picker
            style="width: 210px"
            :default-time="['00:00:00', '23:59:59']"
            v-model="loanTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="handleClearLoanTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="归还人" prop="restitutionUserName">
          <el-input
            v-model="queryParams.restitutionUserName"
            placeholder="请输入归还人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="归还时间" prop="">
          <el-date-picker
            style="width: 215px"
            :default-time="['00:00:00', '23:59:59']"
            v-model="restitutionTime"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            @change="handleClearRestitutionTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="状态">
            <el-option
              v-for="dict in dict.type.record_of_collection"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!--      <el-form-item label="领取柜" prop="loanFormName">-->
        <!--        <el-select v-model="queryParams.loanFromId" placeholder="请选择领取柜">-->
        <!--          <el-option-->
        <!--            v-for="dict in cabinets"-->
        <!--            :key="dict.value"-->
        <!--            :label="dict.label"-->
        <!--            :value="dict.value"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->

        <!--      <el-form-item label="归还柜" prop="restitutionToName">-->
        <!--        <el-select-->
        <!--          v-model="queryParams.restitutionToId"-->
        <!--          placeholder="请选择归还柜"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="dict in cabinets"-->
        <!--            :key="dict.value"-->
        <!--            :label="dict.label"-->
        <!--            :value="dict.value"-->
        <!--          />-->
        <!--        </el-select>-->
        <!--      </el-form-item>-->

        <el-form-item>
          <el-button
            v-no-more-click
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button
            v-no-more-click
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
    <el-row>
      <el-button
        v-no-more-click
        type="danger"
        icon="el-icon-search"
        size="mini"
        v-if="!visibleSelect"
        @click="handleQueryStatus"
        style="margin: 0 2.5% 10px"
        >超时未还</el-button
      >
    </el-row>

    <el-table
      v-loading="loading"
      :data="teamList"
      @selection-change="handleSelectionChange"
    >
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column
        v-if="!visibleSelect"
        label="物资柜"
        align="center"
        prop="loanFromName"
      >
      </el-table-column>
      <el-table-column label="物资编号" align="center" prop="materialsId">
      </el-table-column>
      <el-table-column label="物资名称" align="center" prop="materialsName" />
      <el-table-column
        label="物资类型"
        align="center"
        prop="materialsTypeName"
        width="180"
      />
      <el-table-column label="物资图片" prop="materialsTypePicture" width="90">
        <template slot-scope="scope">
          <div class="img-box" v-if="scope.row.materialsTypePicture">
            <el-image
              style="width: 50px; height: 50px"
              :preview-teleported="true"
              class="images"
              :hide-on-click-modal="true"
              :src="scope.row.materialsTypePicture"
              :zoom-rate="1.2"
              :preview-src-list="[scope.row.materialsTypePicture]"
              :initial-index="1"
              fit="cover"
            >
            </el-image>
            <i class="el-icon-zoom-in" id="eyeicon"></i>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="领取人" align="center" prop="loanUserName">
      </el-table-column>
      <el-table-column label="领取时间" align="center" prop="loanTime" />
      <el-table-column label="归还人" align="center" prop="restitutionUserName">
      </el-table-column>
      <!--      实际归还时间-->
      <el-table-column
        label="归还时间"
        align="center"
        prop="actualRestitutionTime"
      />
      <el-table-column label="借出时长" align="center" prop="loanDuration" />
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.record_of_collection"
            :value="scope.row.status"
          />
        </template>
      </el-table-column>
      <!--      <el-table-column label="领取柜" align="center" prop="loanFromName" />-->
      <!--      <el-table-column-->
      <!--        label="是否需要归还"-->
      <!--        align="center"-->
      <!--        prop="restitutionRequired"-->
      <!--      >-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag type="primary" v-if="scope.row.restitutionRequired == 1"-->
      <!--            >是</el-tag-->
      <!--          >-->
      <!--          <el-tag type="danger" v-else>否</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="归还柜" align="center" prop="restitutionToName" />-->
      <!-- <el-table-column label="创建时间" align="center" prop="createTime">
      </el-table-column> -->
      <!--      <el-table-column-->
      <!--        label="理应归还时间"-->
      <!--        align="center"-->
      <!--        prop="restitutionTime"-->
      <!--      />-->
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button v-no-more-click
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['mes:mat:coll:remove']"
            >删除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listLoan } from "@/api/mes/loan/loan";
import { getIsMaterialsCabinets } from "@/api/mes/material/information";
import { genCode } from "@/api/system/autocode/rule";
import Template from "@/views/print/printtemplate/list.vue";
import { listType } from "@/api/mes/material/typeindex";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "Team",
  components: { Treeselect, Template },
  props: {
    cabinetId: {
      type: String,
      required: false,
    },
  },
  dicts: ["sys_yes_no", "record_of_collection"],
  data() {
    return {
      //自动生成编码
      autoGenFlag: false,
      optType: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      codes: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 班组表格数据
      teamList: [],
      cabinets: null, //物资柜子数据
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        materialsName: null,
        materialsCode: null,
        loanUserName: null, //领取人姓名
        loanTimeStart: null, //领取开始时间
        loanTimeEnd: null, //领取结束时间
        restitutionUserName: null, //归还人姓名
        restitutionTimeStart: null, //归还开始时间
        restitutionTimeEnd: null, //归还结束时间
        restitutionRequired: null, //是否需要归还
        restitutionToName: null, //归还柜
        restitutionToId: null, //归还柜id
        loanFormName: null, //领取柜
        loanFromId: null, //领取柜id
        status: null,
      },
      loanTime: null, //领取时间回显
      restitutionTime: null, //归还时间回显
      // 查询参数
      queryParamsCabinets: {
        current: 1,
        size: -1,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: "",
      // 表单参数
      form: {},
      machinerytypeOptions: [],
      visibleSelect: false,
    };
  },
  created() {
    this.queryParams.loanFromId = this.cabinetId || null;
    if (this.cabinetId) {
      this.visibleSelect = true;
    }
    this.getList();
    this.getTreeselect();
    this.materialsCabinets();
  },
  methods: {
    // 格式化日期查询数据
    formatDate(date) {
      if (date && date instanceof Date && !isNaN(date)) {
        // 使用本地时间
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0");
        const day = String(date.getDate()).padStart(2, "0");
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
      return null;
    },
    /** 查询班组列表 */
    getList() {
      this.loading = true;
      if (Array.isArray(this.loanTime) && this.loanTime.length === 2) {
        console.log();
        this.queryParams.loanTimeStart = this.formatDate(this.loanTime[0]);
        this.queryParams.loanTimeEnd = this.formatDate(this.loanTime[1]);
      }
      if (
        Array.isArray(this.restitutionTime) &&
        this.restitutionTime.length === 2
      ) {
        this.queryParams.restitutionTimeStart = this.formatDate(
          this.restitutionTime[0]
        );
        this.queryParams.restitutionTimeEnd = this.formatDate(
          this.restitutionTime[1]
        );
      }
      listLoan(this.queryParams).then((response) => {
        // console.log(response, "领取管理列表");
        this.teamList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 物资所属柜
    materialsCabinets() {
      getIsMaterialsCabinets(this.queryParamsCabinets).then((response) => {
        if (response?.data?.records) {
          // 提取 cabinetId 和 cabinetName
          this.cabinets = response.data.records.map((item) => ({
            value: item.cabinetId,
            label: item.cabinetName,
          }));
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        materialsCode: null,
        materialsName: null,
        loanFromName: null,
        restitutionRequired: null,
        loanUserName: null,
        createTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    // 专门查询超时未还的
    handleQueryStatus() {
      this.queryParams.status = "2";
      this.queryParams.current = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.materialsName = null;
      this.queryParams.materialsCode = null;
      this.queryParams.loanUserName = null;
      this.queryParams.restitutionRequired = null; //是否需要归还
      this.queryParams.restitutionUserName = null;
      this.queryParams.restitutionToName = null; //归还柜
      this.queryParams.restitutionToId = null; //归还柜id
      this.queryParams.loanFormName = null; //领取柜
      this.queryParams.loanFromId = null; //领取柜id
      this.queryParams.loanTimeStart = null;
      this.queryParams.loanTimeEnd = null;
      this.loanTime = null;
      this.restitutionTime = null;
      this.queryParams.restitutionTimeEnd = null;
      this.queryParams.restitutionTimeStart = null;
      this.queryParams.restitutionUserName = null;
      this.queryParams.status = null;
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.materialsLoanId);
      this.codes = selection.map((item) => item.materialsName);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /** 查询物资类型下拉树结构 */
    getTreeselect() {
      const data = {
        current: 1,
        size: -1,
      };

      listType(data).then((response) => {
        this.machinerytypeOptions = this.handleTree(
          response.data.records,
          "materialsTypeId",
          "parentId",
          "children"
        );
      });
    },
    /** 转换数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.materialsTypeId,
        label: node.materialsTypeName,
        children: node.children,
      };
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "cal/team/export",
        {
          ...this.queryParams,
        },
        `team_${new Date().getTime()}.xlsx`
      );
    },
    //自动生成编码
    handleAutoGenChange(autoGenFlag) {
      if (autoGenFlag) {
        genCode("CAL_TEAM_CODE").then((response) => {
          this.form.teamCode = response;
        });
      } else {
        this.form.teamCode = null;
      }
    },
    //领取时间清空
    handleClearLoanTime(value) {
      if (value == null) {
        this.queryParams.loanTimeStart = null;
        this.queryParams.loanTimeEnd = null;
      }
    },
    //归还时间情况
    handleClearRestitutionTime(value) {
      if (value == null) {
        this.queryParams.restitutionTimeStart = null;
        this.queryParams.restitutionTimeEnd = null;
      }
    },
  },
};
</script>
<style lang="scss" src="@/assets/styles/dialog-title.scss" scoped>
.el-input-width {
  width: 380px !important;
}
</style>
  <style lang="scss" >
//图片放大
.img-box {
  width: 50px;
  height: 50px;
  position: relative;

  #eyeicon {
    display: none;
  }
}

.img-box:hover {
  background: #000;

  .images {
    opacity: 0.6;
  }

  #eyeicon {
    display: block;
    position: absolute;
    top: 40%;
    left: 40%;
    z-index: 100;
    color: white;
    pointer-events: none;
  }
}
</style>
