<template>
  <d2-container>
    <div class="providerOrderList-container">
      <div class="filter-box">
        <div class="filter-item">
          <div class="spana">客户名称：</div>
          <el-input v-model="conditionCollection.customerName"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-item">
          <div class="spana">采购单号：</div>
          <el-input v-model="conditionCollection.orderNum"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-item">
          <div class="spana">产品类型：</div>
          <el-select v-model="conditionCollection.productType"
                     placeholder="全部">
            <el-option v-for="item in typeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <div class="spana">产品型号：</div>
          <el-input v-model="conditionCollection.productModel"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-item">
          <div class="spana">付费模式：</div>
          <el-select v-model="conditionCollection.paymentModel"
                     placeholder="全部">
            <el-option v-for="item in paymentModelList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <div class="spana">生产状态：</div>
          <el-select v-model="conditionCollection.productionState"
                     placeholder="全部">
            <el-option v-for="item in productionStateList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>

        <div class="filter-btn">
          <el-button type="primary"
                     size=""
                     @click="queryData()">查询</el-button>
          <el-button type=""
                     size=""
                     @click="reset()">重置</el-button>
          <el-button type="success"
                     icon="el-icon-circle-plus-outline"
                     @click="addBusiness()">新建采购单</el-button>
        </div>
      </div>
      <div>
        <el-table :data="dataList"
                  size="medium"
                  style="width: 100%; text-align: center;"
                  :key="tablekey"
                  v-loading="loadings">
          <!-- <el-table-column prop="userCode" label="序号"> </el-table-column> -->
          <el-table-column prop="id"
                           label="序号"> </el-table-column>
          <el-table-column prop="orderNum"
                           label="采购单号"></el-table-column>
          <el-table-column prop="customer"
                           label="客户名称"> </el-table-column>
          <el-table-column prop="productName"
                           label="产品名称"> </el-table-column>
          <el-table-column prop="productTypeValue"
                           label="产品类型"></el-table-column>
          <el-table-column prop="productModel"
                           label="产品型号"> </el-table-column>
          <el-table-column prop="plannedPurchase"
                           label="计划采购量"> </el-table-column>
          <el-table-column prop="paymentModelValue"
                           label="付费模式"> </el-table-column>
          <el-table-column prop="bindNum"
                           label="入库数量"> </el-table-column>
          <el-table-column prop="productionStateValue"
                           label="生产状态"> </el-table-column>
          <el-table-column prop="deviceStateValue"
                           label="设备状态"> </el-table-column>
          <el-table-column prop="createTime"
                           label="下单时间"> </el-table-column>

          <el-table-column fixed="right"
                           label="操作"
                           width="120">
            <template slot-scope="scope">
              <!-- 编辑 -->

              <el-button type="text"
                         style="font-size: 14px; margin-left: 0px"
                         @click="detils(scope.row.orderNum)">查看详情</el-button>
              <el-button type="text"
                         v-if="scope.row.deviceState == 1"
                         style="font-size: 14px; margin-left: 10px"
                         @click="enable(scope.row.orderNum)">启用</el-button>
              <el-button type="text"
                         v-if="scope.row.deviceState == 0"
                         style="font-size: 14px; margin-left: 10px;color:red"
                         @click="disable(scope.row.orderNum)">停用</el-button>
              <el-button type="text"
                         v-if="scope.row.bindNum == 0"
                         style="font-size: 14px; margin-left: 10px;color:red"
                         @click="deleteOrder(scope.row.orderNum)">作废</el-button>
              <!-- <el-button type="text"
                         style="font-size: 14px; margin-left: 10px"
                         @click="enable(scope.row.openId)">编辑</el-button> -->

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <pagination v-show="total >= 0"
                    :total="total"
                    :page.sync="searchCriteria.pageNow"
                    :limit.sync="searchCriteria.pageSize"
                    @pagination="pagingEvent" />
      </div>
    </div>
  </d2-container>
</template>

<script>
import {
  getProduct,
  getProductType,
  purchaseOrderFind,
  getPurchaseOrderPaymentModel,
  getPurchaseOrderProductionState,
  purchaseOrderEnableCar,
  purchaseOrderDisableCar,
  purchaseOrderDelete,
} from "@/libs/common/constant";
import { selectListALL } from "@/utils/json";
export default {
  data() {
    return {
      conditionCollection: {
        customerName: "",
        orderNum: "",
        productType: "",
        productModel: "",
        paymentModel: "",
        productionState: "",
      },
      dataList: [],
      searchCriteria: {
        pageNow: 1,
        pageSize: 10,
      },
      total: 0,
      tablekey: "",
      loadings: true,
      isLoadProvinceId: true,
      // 产品 类型
      typeList: [],
      paymentModelList: [],
      productionStateList: [],
      determineQueryData: {},
    };
  },
  async created() {
    // 获取 字典 数据
    await this.getConstant();
    // 获取 初始 数据
    await this.queryData();
  },
  methods: {
    // 查询
    async queryData() {
      this.determineQueryData = this.conditionCollection;
      var data = this.conditionCollection;
      data.currentPage = this.searchCriteria.pageNow;
      data.pageSize = this.searchCriteria.pageSize;
      await this.getListData(data);
    },
    //  重置
    reset() {
      var obj = this.conditionCollection;
      for (const key in obj) {
        obj[key] = "";
      }
    },
    // 获取 列表 参数
    async getListData(data) {
      this.loadings = true;
      const dataList = await this.purchaseOrderFind(data);
      console.log(dataList);
      this.total = dataList.total;
      this.dataList = dataList.list;
      this.loadings = false;
    },

    async purchaseOrderFind(data) {
      const res = await this.$api.GET(`${purchaseOrderFind.url}`, data);
      return res;
    },

    async pagingEvent() {
      // await this.queryData();
      var data = this.determineQueryData;
      data.currentPage = this.searchCriteria.pageNow;
      data.pageSize = this.searchCriteria.pageSize;
      await this.getListData(data);
    },

    // 添加 产品
    addBusiness() {
      this.$router.push({
        path: "/addpurchaseOrder",
      });
    },

    // 查看详情
    detils(openId) {
      this.$router.push({
        path: `/purchaseOrderDetails/${openId}`,
      });
    },
    selectListALL(myJson) {
      return selectListALL(myJson);
    },
    // 获取 常量
    async getConstant() {
      await this.getProductType();
      await this.getPurchaseOrderPaymentModel();
      await this.getPurchaseOrderProductionState();
    },

    // 获取 产品类型
    async getProductType() {
      const res = await this.$api.GET(`${getProductType.url}`);
      this.typeList = this.selectListALL(res);
    },
    async getPurchaseOrderPaymentModel() {
      const res = await this.$api.GET(`${getPurchaseOrderPaymentModel.url}`);
      this.paymentModelList = this.selectListALL(res);
    },
    async getPurchaseOrderProductionState() {
      const res = await this.$api.GET(`${getPurchaseOrderProductionState.url}`);
      this.productionStateList = this.selectListALL(res);
    },
    async disable(orderNum) {
      this.$confirm("确认禁用此采购单所有设备吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning',
        customClass: "custom-confirm",
      })
        .then(() => {
          this.purchaseOrderDisableCar(orderNum);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消禁用!",
          });
        });
    },
    // 禁用 采购单下所有车辆
    async purchaseOrderDisableCar(orderNum) {
      const res = await this.$api.POST(
        `${purchaseOrderDisableCar.url}${orderNum}`
      );
      console.log(res);
      await this.queryData();
      this.$message({
        type: "success",
        message: "禁用成功!",
      });
    },
    enable(orderNum) {
      this.$confirm("确认启用此采购单所有设备吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning',
        customClass: "custom-confirm",
      })
        .then(() => {
          this.purchaseOrderEnableCar(orderNum);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已停止启用!",
          });
        });
    },
    // 启用 采购单下所有车辆
    async purchaseOrderEnableCar(orderNum) {
      const res = await this.$api.POST(
        `${purchaseOrderEnableCar.url}${orderNum}`
      );
      console.log(res);
      await this.queryData();
      this.$message({
        type: "success",
        message: "启用成功!",
      });
    },
    deleteOrder(orderNum) {
      this.$confirm("确认作废此采购单吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning',
        customClass: "custom-confirm",
      })
        .then(() => {
          this.purchaseOrderDelete(orderNum);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已停止作废!",
          });
        });
    },
    // 作废 采购单 purchaseOrderDelete
    async purchaseOrderDelete(orderNum) {
      const res = await this.$api.POST(`${purchaseOrderDelete.url}${orderNum}`);
      console.log(res);
      await this.queryData();
      this.$message({
        type: "success",
        message: "作废成功!",
      });
    },
    // 编辑产品
    // async enable(openId) {
    //   this.$router.push({
    //     path: `/editProduct/${openId}`,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>
