<template>
  <div>
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <el-form-item label="第几次盘点">
        <el-select
          v-model="specReq.count"
          :disabled="departmentReaderOnly"
          @change="changeDepartment(0)"
          style="width:100px"
        >
          <el-option v-for="item in tCounts" :key="item.num" :label="item.num" :value="item.num"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型">
        <el-select
          v-model="specReq.typeId"
          :disabled="departmentReaderOnly"
          @change="changeDepartment(1)"
        >
          <el-option v-for="item in types" :key="item.id" :label="item.type" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select
          v-model="specReq.brandId"
          :disabled="departmentReaderOnly"
          placeholder="请选择"
          @change="changeDepartment(2)"
        >
          <el-option v-for="item in brands" :key="item.id" :label="item.brand" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="specReq.equipmentState"
          :disabled="departmentReaderOnly"
          placeholder="请选择"
          @change="changeDepartment(3)"
          style="width:100px"
        >
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="其他">
        <el-select
          v-model="specReq.other"
          :disabled="departmentReaderOnly"
          placeholder="请选择"
          @change="changeDepartment(4)"
          style="width:100px"
        >
          <el-option
            v-for="item in otherList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="`出库日期`">
        <el-date-picker
          v-model="outTime"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd 00:00:00"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeOutData"
          style="width:300px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item :label="`入库日期`">
        <el-date-picker
          v-model="inTime"
          type="daterange"
          align="right"
          value-format="yyyy-MM-dd 00:00:00"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeInData"
          style="width:300px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="规格">
        <el-input v-model="specReq.specType" placeholder="规格信息" clearable></el-input>
      </el-form-item>

      <el-form-item label="使用人">
        <el-input v-model="specReq.user" placeholder="使用人信息" clearable></el-input>
      </el-form-item>

      <el-form-item label="现有编码">
        <el-input v-model="specReq.code" placeholder="现有编码" clearable></el-input>
      </el-form-item>

      <el-form-item label="自带标识">
        <el-input v-model="specReq.qr" placeholder="设备自带标识" clearable></el-input>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="specReq.mark" placeholder="备注" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="clearGet()">清空筛选</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addNew()">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="dataListLoading" :data="data" style="width: 100%" @row-click="rowClick">
      <el-table-column prop="id" header-align="center" align="center" label="ID"></el-table-column>
      <el-table-column prop="type" header-align="center" align="center" label="类型"></el-table-column>
      <el-table-column prop="brandName" header-align="center" align="center" label="品牌"></el-table-column>
      <el-table-column prop="specType" header-align="center" align="center" label="规格"></el-table-column>
      <el-table-column prop="user" header-align="center" align="center" label="使用方"></el-table-column>
      
      <el-table-column prop="code" header-align="center" align="center" label="现有编码"></el-table-column>
      
      <el-table-column prop="originalCode" header-align="center" align="center" label="自带标识"></el-table-column>
      <el-table-column prop header-align="center" align="center" label="状态">
        <template slot-scope="scope">
          <div class="conatnt-name">
            <span>{{ getStatusStr(scope.row.equipmentState) }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="mark" header-align="center" align="center" label="备注"></el-table-column>
      <el-table-column prop="gmtOutbound" header-align="center" align="center" label="出库时间"></el-table-column>
      <el-table-column prop="gmtInbound" header-align="center" align="center" label="入库时间"></el-table-column>
      
      <el-table-column prop="buyAmount" header-align="center" align="center" label="买入金额"></el-table-column>
      <el-table-column prop="saleAmount" header-align="center" align="center" label="出售金额"></el-table-column>
      <el-table-column prop="no" header-align="center" align="center" label="审批编号"></el-table-column>
      
      <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click="handleAddOrUpdate(scope.row)">编辑</el-button>
          <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click="handlePrint(scope.row)">打印标识</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="specReq.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="specReq.rows"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <device-list-detail v-if="isShowDetail" ref="deviceListDetail" @refreshDataList="getData"></device-list-detail>
    <device-list-add v-if="isShowAdd" ref="deviceListAdd" @refreshDataList="getData"></device-list-add>
  </div>
</template>
<script>
import {
  apiGetUseDeviceList,
  apiGetDeviceBrands,
  apiDelDeviceSpecs,
  apiGetRePrintCode,
  apiDelUseDevice,
} from "@/api/api_equipment";
import * as dd from "dingtalk-jsapi";
import DeviceListDetail from "./device-list-detail.vue";
import DeviceListAdd from "./device-list-add.vue";
export default {
  components: {
    DeviceListDetail,
    DeviceListAdd,
  },
  data() {
    return {
      isShowSearch: true,
      isShowAdd: true,
      data: [],
      types: [],
      brands: [],
      tCounts: [],
      outTime: [],
      inTime: [],
      name: "",
      categorys: "",
      input: "",
      dataListLoading: false,
      typeIndex: 0, //0现在是1级 1二级2三级
      showHeader: false,
      totalPage: 1,
      departmentReaderOnly: false,
      statusType: -1,
      specReq: {
        page: 1,
        rows: 10,
        sort: null,
        order: null,
        id: null,
        isDelete: 0,
        gmtCreate: null,
        gmtModified: null,
        specType: null,
        type: null,
        num: null,
        unit: null, //单位 件/台
        user: null, //使用者
        owner: null, //所有者
        qr: null, //设备本身标识
        originalCode: null, //设备原有标识，老标识
        code: null, //设备现有标识
        mark: null, //备注
        gmtOutbound: null, // 最后一次出库时间
        gmtInbound: null, //第一次入库时间
        equipmentState: null, //状态
        buyAmount: null, //买入金额
        saleAmount: null, //出售金额
        no: null, //审批流水
        brandId: null,
        typeId: null,
        gmtInStartTime: null,
        gmtInEndTime: null,
        gmtOutStartTime: null,
        gmtOutEndTime: null,
        count: null,
        other: null,
      },
      otherList: [
        { value: null, label: "全部" },
        { value: 1, label: "有备注" },
        { value: 2, label: "未盘点" },
      ],
      stateList: [
        { value: null, label: "全部" },
        { value: 0, label: "入库" },
        { value: 1, label: "售出" },
        { value: 2, label: "不可用" },
        { value: 3, label: "调拨" },
        { value: 4, label: "申领" },
      ],
      isShowDetail: false,
    };
  },

  created() {
    // this.handleGetImgCaptcha()
  },
  
  mounted() {
    this.getData();
  },
  methods: {
    getStatusStr(status) {
      if (status < 5) {
        return this.stateList[status + 1].label;
      }
      return status;
    },
    addNew() {
      setTimeout(() => {
        this.$refs.deviceListAdd.init(null, this.types, this.brands);
      }, 500);
      this.isShowDetail = true;
    },
    
    changeOutData(val) {
      console.log(val)
      if(val){
        this.specReq.gmtOutStartTime = val[0]
        this.specReq.gmtOutEndTime = val[1]
      }else{
        this.specReq.gmtOutStartTime = null
        this.specReq.gmtOutEndTime = null
      }
      
      this.btnSearch()
    },
    changeInData(val) {
      console.log(val)
      if(val){
        this.specReq.gmtInStartTime = val[0]
        this.specReq.gmtInEndTime = val[1]
      }else{
        this.specReq.gmtInStartTime = null
        this.specReq.gmtInEndTime = null
      }
      
      this.btnSearch()
    },
    changeDepartment(type) {
      this.specReq.page = 1;
      if (type == 1) {
        //获取品牌
        this.getBrands();
        this.specReq.brandId = null;
      } else {
        this.btnSearch()
      }
    },
    sizeChangeHandle(val) {
      this.specReq.rows = val;
      this.btnSearch()
    },
    getData() {
      console.log("获取数据");
      console.log(this.name);
      console.log(this.categorys);
      this.dataListLoading = true;
      apiGetUseDeviceList(this.specReq).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.data = data.rows;
          this.totalPage = data.total;
          this.types = data.types;
          this.tCounts = data.tCounts;
          this.specReq.count = data.curCount;
        } else {
          this.data = [];
        }
        this.dataListLoading = false;
      });
    },
    getBrands() {
      apiGetDeviceBrands(this.specReq).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.brands = data.brands;
          this.btnSearch()
        } else {
          this.brands = [];
        }
        this.dataListLoading = false;
      });
    },
    currentChangeHandle(val) {
      this.btnSearch()
    },
    // 新增 / 编辑
    handleAddOrUpdate(val) {
      console.log(val);
      //id, typeId, type, brandId, brand, specs, skus, rank, used, remark, types, brands
      setTimeout(() => {
        this.$refs.deviceListDetail.init(val, this.types, this.brands);
      }, 500);
      this.isShowDetail = true;
    },
    // 删除
    handleDelete(val) {
      this.$confirm(
        "确定删除“" + val.user + "的" + val.specType + "”吗？删除后该条设备信息将无法使用",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.delUserDevices(val.id);
        })
        .catch(() => {});
    },
    handlePrint(val) {
      apiGetRePrintCode({}, val.code).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.$message("发送打印请求成功");
        } else {
          this.$message.error("发送打印请求失败！" + data.msg);
        }
      });
    },
    delUserDevices(id) {
      apiDelUseDevice({
        page: 1,
        rows: 10,
        sort: null,
        order: null,
        id: id,
        isDelete: 0,
        gmtCreate: null,
        gmtModified: null,
        specType: null,
        type: null,
        num: null,
        unit: null, //单位 件/台
        user: null, //使用者
        owner: null, //所有者
        qr: null, //设备本身标识
        originalCode: null, //设备原有标识，老标识
        code: null, //设备现有标识
        mark: null, //备注
        gmtOutbound: null, // 最后一次出库时间
        gmtInbound: null, //第一次入库时间
        equipmentState: null, //状态
        buyAmount: null, //买入金额
        saleAmount: null, //出售金额
        no: null, //审批流水
        brandId: null,
        typeId: null,
        gmtInStartTime: null,
        gmtInEndTime: null,
        gmtOutStartTime: null,
        gmtOutEndTime: null,
        count: null,
        other: null
      }).then((data) => {
        console.log(data);
        if (data && data.code === 0) {
          this.$message("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败" + data.msg);
        }
        this.dataListLoading = false;
      });
    },
    clearGet() {
      this.specReq.page = 1
      this.specReq.sort = null
      this.specReq.order = null
      this.specReq.id = null
      this.specReq.gmtCreate = null
      this.specReq.gmtModified = null
      this.specReq.specType = null
      this.specReq.type = null
      this.specReq.num = null
      this.specReq.qr = null
      this.specReq.unit = null
      this.specReq.user = null
      this.specReq.owner = null
      this.specReq.originalCode = null
      this.specReq.code = null
      this.specReq.mark = null
      this.specReq.gmtOutbound = null
      this.specReq.gmtInbound = null
      this.specReq.equipmentState = null
      this.specReq.buyAmount = null
      this.specReq.saleAmount = null
      this.specReq.no = null
      this.specReq.brandId = null
      this.specReq.typeId = null
      this.specReq.gmtInStartTime = null
      this.specReq.gmtInEndTime = null
      this.specReq.gmtOutStartTime = null
      this.specReq.gmtOutEndTime = null
      this.specReq.other = null
      this.inTime = null
      this.outTime = null
      this.getData()
    },
    
    btnSearch() {
      this.specReq.page = 1
      this.getData();
    },

    rowClick(row, event, column) {},
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 10px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5f2f1;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.div_height {
  height: 38px;
}
.div_width {
  width: 100%;
}
.width_100 {
  width: 100px;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1em;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
.flex_son {
  width: 100%;
  height: 100%;
  border: 0x solid;
}
</style>