<template>
  <el-container>

    <el-header height="" class="pdt">
      <el-form
        :model="details"
        ref="details"
        label-width="120px"
        size="mini"
        label-position="left"
        class="demo-ruleForm"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策编号" prop="code">
              <el-input disabled v-model="details.code" placeholder="如未填写，则系统自动生成"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策说明" prop="title">
              <el-input disabled v-model="details.title" placeholder="销售政策说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="销售政策类型" prop="type">
              <el-select disabled v-model="typeOptions[details.type]" placeholder="请选择">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12"> </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单人" prop="createBy">
              <el-input disabled v-model="details.createBy" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :ms="12" :lg="12">
            <el-form-item label="制单日期" prop="startTime">
              <el-input disabled v-model="details.startTime" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="表头备注" prop="remark">
            <el-input disabled v-model="details.remark" placeholder="如：新风机变频挂机。按提货数量1:3开单"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </el-header>
    <!-- 按钮 -->
    <div class="btn-group clearfix">
      <div class="fl">
        <el-button type="primary" size="small" slot="reference" class="el-popover-left" @click="handleEdit"
          >批量编辑</el-button
        >
      </div>
    </div>
    <el-main class="mymain-container">
      <div class="table">
        <el-table
          v-loading="listLoading"
          :data="dataList"
          element-loading-text="Loading"
          border
          @select="hanleSelectAll"
          @select-all="hanleSelectAll"
          fit
          highlight-current-row
          stripe
        >
          <el-table-column type="selection" width="55" align="center"> </el-table-column>
          <el-table-column prop="customerNumber" label="经销商编码" width="300" align="center"> </el-table-column>
          <el-table-column prop="customerName" label="经销商名称" width="300" align="center"> </el-table-column>
          <el-table-column prop="limitTakeNum" label="最多提货套数" width="300" align="center"> </el-table-column>
          <el-table-column prop="remark" label="表体备注" width="300" align="center"> </el-table-column>
          <el-table-column prop="lastOrderTime" label="最近订货时间" width="300" align="center"> </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
            <!--  v-if="!$store.getters.customerId"-->
            <template slot-scope="scope">
              <el-button type="text" size="small" @click=";(type = 2), (dialogVisible = true), (id = scope.row.id)"
                >设置</el-button
              >
              <el-button type="text" size="small" @click=";(type = 1), (dialogVisible = true), (id = scope.row.id)">
                备注</el-button
              >
              <!-- <el-button type="text" size="small">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="fr" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listTotal"
        >
        </el-pagination>
      </div>
    </el-main>

    <el-dialog :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-input v-if="type == 1" v-model="remark" placeholder="备注" size="small"></el-input>
      <el-input
        v-else
        v-model="limitTakeNum"
        placeholder="最大提货数量
"
        size="small"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleInfo">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import Pagination from './Pagination'
import Transfer from './Transfer'
import { eidtBatch, getCustomerList, getPolicyDetail } from '@/api/policy_list'
import Minxin from '@/mixin'

export default {
  mixins: [Minxin],
  props: {
    cid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      input: '',
      ruleForm: {},
      listLoading: false,
      remark: '',
      limitTakeNum: '',
      searchForm: {
        code: '',
        remark: '',
        title: ''
      },
      id: '',
      ids: [],
      dataList: [],
      detail: {},
      radio: '',
      type: '',
      typeOptions: [
        {
          vlaue: 'PROVISION',
          label: '配提'
        },
        {
          value: 'LIMIT',
          label: '限量'
        }
      ],
      details: {}
    }
  },

  methods: {
    handelLeftCheck(e) {
      console.log(e)
    },
    getList() {
      if (this.cid) {
        this.listLoading = true
        const params = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          policyId: this.cid
        }
        getCustomerList(params).then(res => {
          this.dataList = res.data.records
          this.listTotal = res.data.total
          this.listLoading = false
        })
        getPolicyDetail({ policyId: this.cid }).then(res => {
          this.details = res.data
          this.listLoading = false
        })
      }
    },
    handleEdit() {
      if (this.ids.length) {
        this.type = 2
        this.dialogVisible = true
        return
      }
      this.$errorMsg('请选编辑项')
    },
    handleClose(done) {
      done()
    },
    hanleDelete() {},

    handleInfo() {
      let ids = this.id && typeof this.id != Array ? [this.id] : this.ids
      eidtBatch({
        policyCustomerIds: ids.join(','),
        limitTakeNum: this.limitTakeNum,
        remark: this.remark
      }).then(res => {
        this.$successMsg('编辑成功')
        this.dialogVisible = false
        this.remark = ''
        this.limitTakeNum = ''
        this.getList()
      })
    }
  },
  components: {
    Transfer,
    Pagination
  }
}
</script>

<style lang="scss" scoped>
.pdt {
  padding-top: 20px;
}

.text_right {
  text-align: right;
}
.el-select {
  width: 100%;
}
</style>
