<template>
  <div>
    <a-affix :target="() => this.$refs.container">
        <a-page-header
          :ghost="false"
          @back="() => $router.go(-1)"
        >
          <template slot="subTitle">
            <a href="javascript:;" @click="() => $router.go(-1)">客户名称：车领主常青二路店</a>
            <a-button size="small" @click="handleEditCustom" style="margin-left:50px" key="0">
              编辑
            </a-button>
          </template>
          <template slot="extra">
            <a-button key="2">
              打印预览
            </a-button>
            <a-button key="1" type="primary">
              快速打印
            </a-button>
          </template>
        </a-page-header>
    </a-affix>
    
    <a-card :bordered="false" size="small" class="pages-wrap">
      <!-- 查询配件列表 -->
      <queryPart></queryPart>
    </a-card>
    <a-card :bordered="false" size="small" class="pages-wrap">
      <!-- alert -->
      <a-alert style="margin-bottom: 15px;" type="info">
        <div slot="message">
          <span>总售价：15；</span>
          <span>总款数：6；</span>
          <span>总数量：3；</span>
          <span>赠品总数量：7；</span>
        </div>
      </a-alert>
      <!-- 查询条件 -->
      <a-row :gutter="15">
        <a-col :span="18">
          <a-form-model layout="inline" :model="productForm" @submit="handleSearch">
              <a-form-model-item label="产品编码">
                <a-input v-model="productForm.productNo" placeholder="输入产品编码" />
              </a-form-model-item>
              <a-form-model-item label="产品名称">
                <a-input v-model="productForm.productName" placeholder="输入产品名称" />
              </a-form-model-item>
              <a-form-model-item>
                <a-button type="primary">
                  查询
                </a-button>
                <a-button style="margin-left: 10px;">
                  重置
                </a-button>
              </a-form-model-item>
            </a-form-model>
        </a-col>
        <a-col :span="6">
          <div style="float:right;overflow: hidden;">
            <a-button id="salesNew-dru">导入明细</a-button>
            <a-button type="primary" style="margin-left: 15px" id="salesNew-del-all">整单删除</a-button>
          </div>
        </a-col>
      </a-row>
      <!-- 已选配件列表 -->
      <s-table
        class="sTable"
        ref="table"
        size="default"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
        :scroll="{ x: 1500, y: 300 }"
        bordered>
        <!-- 价格 -->
        <template slot="price" slot-scope="text, record">
          <editable-cell :text="text" :step="0.1" @change="onCellChange(record.id, 'price', $event)" />
        </template>
        <!-- 数量 -->
        <template slot="salesNums" slot-scope="text, record">
          <editable-cell :text="text" :precision="0" @change="onCellChange(record.id, 'salesNums', $event)" />
        </template>
      </s-table>
    </a-card>
    <!-- 选择客户弹框 -->
    <chooseCustom :show="openModal" @ok="chooseCustomOk" @cancel="openModal=false"></chooseCustom>
  </div>
</template>

<script>
  import { STable, VSelect } from '@/components'
  import queryPart from './queryPart.vue'
  import EditableCell from '@/views/common/editInput.js'
  import chooseCustom from './chooseCustom.vue'
  export default{
    name: 'salesDetail',
    components: {
      STable,
      VSelect,
      queryPart,
      EditableCell,
      chooseCustom
    },
    data(){
      return {
        disabled: false,
        openModal: false,
        dataSource:[],
        productForm:{
          productNo: '',
          productName: ''
        },
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: 'no',
            align: 'center',
            width: 100
          },
          {
            title: '产品编码',
            dataIndex: 'productNo',
            align: 'center',
            sorter: true
          },
          {
            title: '产品名称',
            dataIndex: 'productName',
            align: 'center'
          },
          {
            title: '原厂编码',
            dataIndex: 'ycNo',
            align: 'center'
          },
          {
            title: '品牌',
            dataIndex: 'productBrand',
            align: 'center',
            sorter: true
          },
          {
            title: '仓库',
            dataIndex: 'cangku',
            align: 'center',
            sorter: true
          },
          {
            title: '仓位',
            dataIndex: 'cangwei',
            align: 'center'
          },
          {
            title: '辅助单位',
            dataIndex: 'pzdw',
            align: 'center'
          },
          {
            title: '售价',
            dataIndex: 'price',
            align: 'center',
            width:150,
            scopedSlots: { customRender: 'price' },
          },
          {
            title: '销售数量',
            dataIndex: 'salesNums',
            align: 'center',
            width:150,
            scopedSlots: { customRender: 'salesNums' },
          },
          {
            title: '单位',
            dataIndex: 'dw',
            align: 'center'
          },
          {
            title: '售价小计',
            dataIndex: 'xj',
            align: 'center'
          },
          {
            title: '折后小计',
            dataIndex: 'zhxj',
            align: 'center'
          },
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          this.disabled = true
          // return customerBundleDelayList( Object.assign(parameter, this.queryParam) ).then(res => {
          //   const data = res.data
          //   const no = (data.pageNo - 1) * data.pageSize
          //   for (var i = 0; i < data.list.length; i++) {
          //     data.list[i].no = no + i + 1
          //   }
          //   this.disabled = false
          //   return data
          // })
          const _this = this
          return new Promise(function(resolve, reject){
            const data = {
              pageNo: 1,
              pageSize: 10,
              list: [
                { 
                  id: '1', 
                  productNo: 'jgqp11111111111', 
                  productName: '产品1', 
                  ycNo: 'jgqp111123545', 
                  productBrand: '箭冠品牌', 
                  productType: '产品分类1', 
                  price: 5.6, 
                  salesNums: 12 ,
                  }
              ],
              count: 10
            }
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            _this.disabled = false
            _this.dataSource = data.list
            resolve(data)
          })
        },
      }
    },
    methods: {
      onCellChange(key, dataIndex, value) {
        console.log(key, dataIndex, value)
        console.log(this.dataSource)
        const dataSource = [...this.dataSource];
        const target = dataSource.find(item => item.id === key);
        if (target) {
          target[dataIndex] = Number(value);
          this.dataSource = dataSource;
        }
      },
      handleSearch(){
        
      },
      // 选择客户成功
      chooseCustomOk(data){
        
      },
      handleEditCustom(){
        this.openModal = true
      },
    },
  }
</script>

<style lang="less">
  .pages-wrap{
    margin-top: 15px;
    .sTable{
      margin-top: 15px;
    }
  }
</style>
