<template>
  <div class="app-container">
    <div class="app-container__item" >
      <div class="app-container__item-h1">合并行列模式</div>
      <div class="app-container__item-body">
        <xd-table
          :default-select="['12987122','12987126']"
          :get-link="getLink"
          :headers="orderHeaders"
          :list="list2"
          :hasExpand="true"
          :stripe="false"
          :custom-function="handleCustom"
          default-expand-all
          @onClick="handleCilck"
          @onSelect="handleSelect"
        >
          <template slot="expand" slot-scope="scope">
            <xd-table
              is-border
              :stripe="false"
              :show-header="false"
              :get-link="getLink"
              :headers="orderHeadersIn"
              :list="list3"
              :custom-function="handleInCustom"
              default-expand-all
              @onClick="handleCilck"
              @onSelect="handleSelect"
            >
              <template slot="status">
                {{scope.row.status}}
              </template>
              <template slot="total">
                <xd-table-price
                  :price="scope.row.total"
                ></xd-table-price>
              </template>
            </xd-table>
          </template>
          <template slot="info" slot-scope="scope"><div class="order-table-info" v-html="getInfo(scope.row)"></div></template>
        </xd-table>
      </div>
    </div>
    <div class="app-container__item">
      <div class="app-container__item-h1">Table模式</div>
      <div class="app-container__item-body" v-if="1">
        <xd-table
          is-border
          :default-select="['12987122','12987126']"
          :get-link="getLink"
          :headers="headers"
          :list="list"
          @onClick="handleCilck"
          @onSelect="handleSelect"
          @onEdit="handleEditItem"
        >
          <template slot="expand" slot-scope="scope">
            {{scope.row}}
          </template>
        </xd-table>

      </div>
    </div>
  </div>
</template>

<script>
  import XdTable from "@/components/XdTable";
  import XdTableStatus from "@/components/XdTableStatus";
  import XdTablePriceNumber from "@/components/XdTablePriceNumber";
  import XdTablePrice from "@/components/XdTablePrice";
  import {Loading} from "element-ui";

  export default {
    name: 'AppTitle',
    components: {
      XdTablePriceNumber,
      XdTablePrice,
      XdTableStatus,
      XdTable,
    },
    data(){
      return {
        headers: [
          {type: 'selection'},
          {type: 'expand'},
          {
            type: 'normal',
            sort: true, prop: 'id',
            width: 200,
            label: '商品 ID',
            notice:{ data:[{label:'a', value:'xx'},{label:'a', value:'xx'},'cc']},
          },
          {type: "edit", "prop": "edit", "blur":false, "align": "center", elType:'text', "width": 280, "label": "可编辑列" },
          {type: 'qrCode', prop: 'address', align: 'center', width: 100, label: '二维码', ext: {download: true}},
          {type: 'barCode', prop: 'id', align: 'center', width: 100, label: '条形码', ext: {download: true, showText: true}},
          {type: 'percentage', prop: 'percentage', align: 'center', width: 80, label: '折扣'},
          {type: 'image', prop: 'image', align: 'center', width: 100, height: 100, label: 'ICON'},
          {
            notice:{ data:[{label:'a', value:'xx'},{label:'a', value:'xx'},'cc']},
            label: '字段显示',
            type: 'field',
            prop: 'field',
            align: 'center',
            width: 200,
            message: {'id':'商品ID', 'name':'商品名称', 'status': '状态', price: ['价格', 'price']}
          },
          {type: 'price', sort: true, prop: 'price', align: 'center', width: 100, label: '价格', unit: '元',notice:{ data:[{label:'a', value:'xx'},{label:'a', value:'xx'},'cc']},},
          {type: 'status', prop: 'status', align: 'center', width: 100, label: '状态'},
          {type: 'normal', prop: 'name', align: 'center', minWidth: 200, label: '商品名称'},
          {type: "sort", "prop": "sort", "align": "center", "width": 120, "label": "排序" },
          {type: "switch", "prop": "is_required", "align": "center", "width": 100, "label": "是否必填", "is_back_type": 1},
          {

            type: 'operate',
            align: 'center',
            prop: 'operate',
            width: 200,
            label: '操作',
            isCheckHide: true,
            values: [
              {ui: 'text-link', icon: 'el-icon-view', target: '_blank', name: '查看', type: 'primary'},
              {ui: 'text-button', icon: 'el-icon-view', name: '查看', type: 'primary'},
              {ui: 'link', icon: 'el-icon-view', target: '_blank', name: '查看', type: 'primary'},
              {ui: 'button', icon: 'el-icon-delete', name: '删除', type: 'danger'},
            ]
          }
        ],
        orderHeaders: [
          {type: 'selection'},
          {type: 'expand', hide: true},
          {type: 'normal', sort: true, prop: 'info', align: 'center', minWidth: 150, label: '商品信息'},
          {
            type: 'priceNumber',
            prop: 'priceNumber',
            align: 'center',
            width: 150,
            label: '价格&数量',
            message: ['price', 'number']
          },
          {

            label: '字段显示',
            type: 'field',
            prop: 'field',
            align: 'center',
            width: 200,
            message: {'id': '商品ID', 'name': '商品名称', 'status': '状态', price: ['价格', 'price']}
          },
          {
            type: 'normal',
            prop: 'status',
            align: 'center',
            width: 120,
            label: '订单状态'
          },
          {type: 'price', prop: 'total', align: 'center', width: 150, label: '实付款'},
          {
            type: 'operate',
            align: 'center',
            prop: 'operate',
            width: 110,
            label: '操作',
            values: [
              {ui: 'text-link', target: '_blank', name: '查看订单', type: 'text'},
            ]
          }
        ],
        orderHeadersIn: [
          {type: 'normal', sort: true, prop: 'info', align: 'left', minWidth: 150, label: '商品信息', rowspan: 4},
          {type: 'priceNumber', prop: "priceNumber", align: 'center', width: 150, label: '价格&数量', message:['price', 'number']},
          {
            label: '字段显示',
            type: 'field',
            prop: 'field',
            align: 'center',
            width: 200,
            message: {'id': '商品ID', 'name': '商品名称', 'status': '状态', price: ['价格', 'price']}
          },
          {type: 'normal', prop: 'status', align: 'center', width: 120, label: '订单状态'},
          {type: 'price', prop: 'total', align: 'center', width: 150, label: '实付款'},
          {
            type: 'operate',
            align: 'center',
            prop: 'operate',
            width: 110,
            label: '操作',
            values: [
              {ui: 'text-button', target: '_blank', name: '发货', type: 'text'},
            ]
          }
        ],
        list: [],
        list2: [],
        list3: [],
      }
    },
    created(){
      this.list2 = [
        {
          order_id: '12987122',
          info: '好滋好味鸡蛋仔',
          percentage: 10,
          total: 8000,
          price: 8000,
          status: '待支付',
          number: '1件',
          created: '2022-10-28 14:14:46',
        },
        {
          order_id: '12987123',
          info: '荷兰优质淡奶',
          percentage: 10000,
          total: 80000,
          price: 80000,
          status: '已完成',
          number: '1件',
          created: '2022-10-28 14:14:46',
        },
        {
          order_id: '129871223',
          info: '荷兰优质淡奶',
          percentage: 1000,
          total: 80000,
          price: 80000,
          status: '已完成',
          number: '1件',
          created: '2022-10-28 14:14:46',
        },
      ];
      this.list3 = [
        {
          order_id: '12987122',
          info: '好滋好味鸡蛋仔',
          total: 8000,
          price: 8000,
          status: '待支付',
          number: '1',
          created: '2022-10-28 14:14:46',
          in: true,
        },
        {
          order_id: '12987123',
          info: '荷兰优质淡奶',
          total: 80000,
          price: 80000,
          status: '已完成',
          number: '1',
          created: '2022-10-28 14:14:46',
          in: true,
        },
      ];
      setTimeout(()=>{
        this.list = [
          {
            id: '12987122',
            percentage: 1000,
            edit: '好滋好味鸡蛋仔',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            price: 8000,
            is_required: true,
            sort: 10,
            status: '已完成',
            image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
          },
          {
            id: '12987123',
            percentage: 100,
            edit: '好滋好味鸡蛋仔',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            price: '120',
            sort: 10,
            is_required: false,
            status: 2,
            image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
          },
          {
            id: '12987125',
            percentage: 100000,
            name: '好滋好味鸡蛋仔',
            edit: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            price: '200',
            is_required: true,
            sort: 10,
            status: 1,
            image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
          },
          {
            id: '12987126',
            percentage: 10,
            edit: '好滋好味鸡蛋仔',
            name: '好滋好味鸡蛋仔',
            category: '江浙小吃、小吃零食',
            desc: '荷兰优质淡奶，奶香浓而不腻',
            address: '上海市普陀区真北路',
            shop: '王小虎夫妻店',
            shopId: '10333',
            price: '300',
            is_required: true,
            sort: 10,
            status: 0,
            image: 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg'
          }
        ];
      },500);
    },
    methods:{
      handleCustom({action, data}){
        if(action === 'merge') {
          //这里必须启用懂下来列才能使用下来功能
          //合并列操作 从第3列开始一共合并5列，被合并列必须返回[0,0]
          let mergeColumn = 4;
          let startColumn = 2;

          //rowIndex，columnIndex的值是从0开始
          let {row, column, rowIndex, columnIndex} = data;

          if (columnIndex === startColumn) {
            return [1, mergeColumn]
          }
          if (columnIndex > startColumn && columnIndex < startColumn + mergeColumn) {
            return [0, 0]
          }
        }

        //是否按钮是否显示
        if (action === 'btn') {
          return true
        }
      },

      /**
       * @description 编辑事件
       * @param header
       * @param row
       * @param cb 返回成功与失败 true=>成功 false=>失败
       */
      handleEditItem({header, row, cb}){
        let loading = Loading.service({});
        setTimeout(()=>{
          cb(this.$xdHelper.random(0,1) === 1);
          loading.close()
        }, 200)
      },

      handleInCustom({action, data}){
        if (action === 'merge') {
          let mergeRow = 1;
          let maxRow = this.list2.length; //需要合并的最大行数
          let {row, column, rowIndex, columnIndex} = data;

          //rowIndex，columnIndex的值是从0开始
          let mergeColumns = [2,3,4,5]; //第4列需要合并行，并且合并到数组最大值,

          const check = (i)=>{
            return mergeColumns.filter(key =>{
              return key === i
            }).length > 0
          }

          if(rowIndex === 0) {
            if(check(columnIndex)) {
              return [maxRow,1]
            }
            else return [1, 1]
          }
          else{
            if (check(columnIndex)) {
              return [0, 0]
            } else return [1, 1]
          }

          //合并列操作 从第2列开始并合并5列，被合并列必须返回[0,0]
          // let mergeColumn = 2;
          // let startColumn = 4;
          // let {row, column, rowIndex, columnIndex} = data;
          // if (columnIndex === startColumn) {
          //   return [1, mergeColumn]
          // }
          // if (columnIndex > startColumn && columnIndex < startColumn + mergeColumn) {
          //   return [0, 0]
          // }
        }


      },


      getInfo(row) {
        return `订单号：${row.order_id}<span style="padding: 0 10px"></span>下单时间：${row.created}`
      },
      handleSelect({select , ids}) {
        console.log('handleSelect',select, ids)
      },

      handleCilck({row, value, index}){
        console.log('handleCilck', row, value, index)
      },

      getLink({row, value, index}){
        return `/table/form/${row.id}`;
      }
    }

  }

</script>

<style lang="scss" scoped>
  .app-container__item-body ::v-deep::before {
    height: 0;
  }

  .app-container {
    padding: 20px;


    &__item {
      margin-bottom: 20px;

      &-h1 {
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        font-weight: bold;
        background: #efefef;
        font-size: 16px;
        text-align: left;
        margin-bottom: 30px;
      }

      &-body {
        padding: 0 20px;

        &-value {
          padding-bottom: 10px;
        }
      }
    }

  }

  @media screen and (max-width: 768px) {
    .app-container {
      padding: 10px;
      margin: 0;

      &__item {
        margin-bottom: 10px;

        &-body {
          padding: 0 10px;
        }
      }
    }
  }
</style>
