<template>
  <div class="app-container">
    <div v-show="!isShowDisplaceDetail">
      <!-- 筛选条件 -->
      <div class="screen-container">
        <Collapse :screen-form="screenForm">
          <template #right_btn>
            <el-button size="mini" @click="resetScreenForm">清空</el-button>
            <el-button size="mini" type="primary" @click="submitScreenForm">搜索</el-button>
          </template>
          <template #search>
            <el-form ref="screenForm" :model="screenForm" label-width="100px" size="mini" label-position="left">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="信息单日期" prop="orderTime">
                    <el-date-picker
                      v-model="screenForm.orderTime"
                      type="datetimerange"
                      range-separator="至"
                      style="width: 100%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="经销商" prop="customerId">
                    <el-select v-model="screenForm.customerId" filterable class="selectStyle" placeholder="请选择">
                      <el-option v-for="item in dealerList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="项目名称" prop="refProjectName">
                    <el-input v-model="screenForm.refProjectName" placeholder="请输入项目名称" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="机型型号" prop="specification">
                    <el-input v-model="screenForm.specification" placeholder="请输入机型型号" />
                  </el-form-item>
                </el-col>
                <!--            <el-col :xs="24" :sm="12" :lg="6">-->
                <!--              <el-form-item label="信息单号" prop="policyRemark">-->
                <!--                <el-input v-model="screenForm.policyRemark" placeholder="请输入销售政策说明" />-->
                <!--              </el-form-item>-->
                <!--            </el-col>-->
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="业务员" prop="serviceId">
                    <el-select
                      v-model="screenForm.serviceId"
                      placeholder="选择业务员"
                      clearable
                      filterable
                      style="width: 100%"
                    >
                      <el-option
                        v-for="item in salesmanList"
                        :key="item.adminUserId"
                        :label="item.nickName"
                        :value="item.adminUserId"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="是否关闭" prop="isClose">
                    <el-select v-model="screenForm.isClose" clearable placeholder="请选择是否">
                      <el-option label="是" :value="true" />
                      <el-option label="否" :value="false" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="审核人" prop="confirmName">
                    <el-input v-model="screenForm.confirmName" placeholder="请输入审核人" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                  <el-form-item label="工程信息单号" prop="refEnginRecordNo">
                    <el-input v-model="screenForm.refEnginRecordNo" placeholder="请输入工程信息单号" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </Collapse>
      </div>

      <div class="mymain-container">
        <div class="btn-group clearfix">
          <div class="fr">
            <ExportButton :ex-url="'engin-info-order/exec/export'" :ex-params="exParams" />
          </div>
        </div>
        <div class="table">
          <el-table
            v-loading="listLoading"
            :data="dataList"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            stripe
            show-summary
            :summary-method="$getSummaries"
          >
            <el-table-column align="left" label="信息单日期" prop="orderDate" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="工程信息单号"
              prop="refEnginRecordNo"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="经销熵编码"
              prop="customerNumber"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="经销商名称"
              prop="customerName"
              min-width="250"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="项目名称"
              prop="refProjectName"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="销售类型" prop="saleTypeName" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="物料编码"
              prop="materialNumber"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="产品编码"
              prop="materialOldNumber"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="产品名称" prop="materialName" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="规格型号" prop="specification" min-width="300" show-overflow-tooltip />
            <el-table-column align="left" label="数量" prop="qty" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="单价" prop="price" min-width="160" show-overflow-tooltip>
              <template v-slot="scope">
                {{ scope.row.price | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="金额" prop="totalAmount" min-width="160" show-overflow-tooltip>
              <template v-slot="scope">
                {{ scope.row.totalAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="未订数量" prop="wdQty" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="未订金额" prop="wdAmount" min-width="160" show-overflow-tooltip>
              <template v-slot="scope">
                {{ scope.row.wdAmount | numToFixed }}
              </template>
            </el-table-column>
            <el-table-column
              align="left"
              label="直调数量"
              prop="directTransferQty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="退订数量" prop="retiredQty" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="退货数量"
              prop="refundProductQty"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="表头业务员" prop="serviceName" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="审核人" prop="confirmName" min-width="160" show-overflow-tooltip />
            <el-table-column align="left" label="是否关闭" prop="isClose" min-width="160" show-overflow-tooltip>
              <template v-slot="scope">
                {{ scope.row.isClose ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column align="left" label="备注" prop="remark" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="格力内部备注"
              prop="geLiInerNote"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="权限分类"
              prop="refPowerCategory"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="合同有效期"
              prop="contractExpireDate"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column
              align="left"
              label="安装地址"
              prop="installAddress"
              min-width="160"
              show-overflow-tooltip
            />
            <el-table-column align="left" label="联系电话" prop="phone" min-width="160" show-overflow-tooltip />
            <el-table-column
              align="left"
              label="工程登录类型"
              prop="enginSignType"
              min-width="160"
              show-overflow-tooltip
            />
          </el-table>
        </div>
      </div>
      <div class="pagination clearfix">
        <div class="fr">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listTotal"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <DisplaceDetail v-if="isShowDisplaceDetail" :list-item="queryItem" @backListFormDetail="backList" />
  </div>
</template>

<script>
import { getExecList } from '@/api/supply/implement'
import { getCategoryList, getSalesmanList } from '@/api/common'
import DisplaceDetail from '@/views/supply/implement/components/displace_detail'
import { getDealerList } from '@/api/supply/apply'

let that
export default {
  components: {
    DisplaceDetail
  },
  filters: {
    statusFilter(val) {
      if (that.statusList.length) {
        const obj = that.statusList.find(o => o.value === val)
        return obj ? obj.label : ''
      }
      return ''
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        confirmName: '',
        customerId: '',
        orderTime: '',
        isClose: '',
        refEnginRecordNo: '',
        refProjectName: '',
        serviceId: '',
        specification: ''
      },
      categoryList: [],
      statusList: [
        { label: '政策零售订单', value: '2' },
        { label: '零售订单', value: '1' },
        { label: '家用工程订单', value: 'HOME' },
        { label: '商用工程订单', value: 'TRADE' }
      ],
      salesmanList: [],
      dealerList: [],
      queryItem: {},
      isCollapse: true,
      isShowDisplaceDetail: false
    }
  },

  computed: {
    exParams() {
      return {
        confirmName: this.screenForm.confirmName,
        customerId: this.screenForm.customerId,
        startOrderDate: this.screenForm.orderTime ? this.screenForm.orderTime[0] : '',
        endOrderDate: this.screenForm.orderTime ? this.screenForm.orderTime[1] : '',
        isClose: this.screenForm.isClose,
        refEnginRecordNo: this.screenForm.refEnginRecordNo,
        refProjectName: this.screenForm.refProjectName,
        serviceId: this.screenForm.serviceId,
        specification: this.screenForm.specification
      }
    }
  },

  beforeCreate() {
    that = this
  },

  created() {
    this.getList()
    this.getCategoryList()
    this.getSalesmanList()
    this.getDealerList()
  },

  methods: {
    // 查询列表
    getList() {
      this.listLoading = true

      const params = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        confirmName: this.screenForm.confirmName,
        customerId: this.screenForm.customerId,
        startOrderDate: this.screenForm.orderTime ? this.screenForm.orderTime[0] : '',
        endOrderDate: this.screenForm.orderTime ? this.screenForm.orderTime[1] : '',
        isClose: this.screenForm.isClose,
        refEnginRecordNo: this.screenForm.refEnginRecordNo,
        refProjectName: this.screenForm.refProjectName,
        serviceId: this.screenForm.serviceId,
        specification: this.screenForm.specification
      }
      getExecList(params).then(res => {
        res.data.records.forEach(item => {
          item.sums1 = [
            'refundableQty',
            'qty',
            'retiredQty',
            'hasSendQty',
            'directTransferQty',
            'refundProductQty',
            'wdQty'
          ]
          item.sums2 = [
            'payAmount',
            'payRebateAmount',
            'hasSendAmount',
            'retiredAmount',
            'refundProductAmount',
            'totalAmount',
            'wdAmount'
          ]
        })
        this.dataList = res.data.records
        this.listTotal = res.data.total
        this.listLoading = false
      })
    },
    // 获取业务员列表
    getSalesmanList() {
      getSalesmanList({
        pageNum: 1,
        pageSize: -1,
        isCustomer: 0,
        status: true
      }).then(res => {
        this.salesmanList = res.data.records
      })
    },
    // 获取经销商列表
    getDealerList() {
      getDealerList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.dealerList = res.data.records
      })
    },
    // 获取存货类别列表
    getCategoryList() {
      getCategoryList({
        pageNum: 1,
        pageSize: -1,
        keyword: ''
      }).then(res => {
        this.categoryList = res.data.records
      })
    },

    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.getList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.getList()
    },

    // 更改每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getList()
    },

    // 更改当前页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },

    // 置换详情
    openDisplaceDetail(item) {
      this.queryItem = item
      this.isShowDisplaceDetail = true
    },

    backList() {
      this.queryItem = {}
      this.isShowDisplaceDetail = false
    }
  }
}
</script>

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