<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-list
          page-title="自定义列表功能"
          dialog-name="客服配置"
          dialog-width="800px"
          search-tab-key="audit_status"
          :computed-headers="handleHeader"
          :computed-search-config="handleSearchList"
          :computed-search-params="handleSearchParams"
          :computed-form-config="handleFormList"
          :check-btn-status="handleRowCheckBtnStatus"
          :computed-form-row-to-config="handleFormRowToConfig"
          :is-search-done-loading="false"
          :is-all-delete-filter="false"
          :is-add-and-edit="true"
          :form-watch="['status']"
          @onList="handleList"
          @onClickOperation="handleClickBtnOperation"
          @onDel="handleDelete"
          @onBatchDel="handleBatchDel"
          @onSort="handleSort"
          @onRowCustomEvent="handleRowCustomEvent"
          @onSave="handleSave"
          @onRowEdit="handleRowEdit"
        >
          <div slot="left">left</div>
          <div slot="right">right</div>
        </xd-table-list>
      </div>
    </div>

  </div>
</template>

<script>
  import XdTableList from "@/components/XdTableList.vue";
  import testData from "@/dome/base/form/testData";
  import {Loading} from "element-ui";

  let id = 0;
  export default {
    name: 'AppList',
    components: {
      XdTableList
    },
    data(){
      return {
        headers: [
          {
            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: 300,
            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'},
              {ui: 'button', icon: 'el-icon-edit', name: '编辑', type: 'primary'},
              {ui: 'text-button', icon: 'el-icon-edit', name: '编辑', type: 'primary'},
            ]
          }
        ],
      }
    },
    created(){

    },
    methods:{
      //编辑行中某项数据
      handleRowEdit({data,cb}){
        let loading = Loading.service({});
        let status = !!this.$xdHelper.random(0,1);
        setTimeout(()=>{
          loading.close();
          cb(status);
        }, 1000)

      },

      //在需要把列表数据转换为编辑数据时可以自定义该方法
      //（如果列列表数据与编辑数据键值一样可以不定义该方法）
      handleFormRowToConfig(row){
        return  {
          user_id: row['id'],
          username:row['name'],
          password: row['price'],
          phone_number:row['percentage'],
          status: row['is_required'] ? 'Y':'N',
          role_ids: [5,6]
        };
      },

      //新增与编辑保存
      handleSave({action, data , success, error}){
        debugger
        let status = this.$xdHelper.random(0,1) === 1;
        setTimeout(()=>{
          if(status) success();
          else  error();
        }, 1000)
      },

      //获取创建对象配置
      handleFormList(params={}){
        let listForm = [
          params.user_id && {
            label: "ID",
            ele: "el-input",
            value: params.user_id || '',
            valueKey: "user_id",
            className: "input80",
            disabled: true,
            rules: [
              { required: true, message: "站点名称不能为空", trigger:'blur'}
            ]
          },
          {
            label: "管理员账号:",
            ele: "el-input",
            value: params.username || '',
            valueKey: "username",
            className: "input80",
            rules: [
              { required: true, message: "管理员账号不能为空", trigger:'blur' }
            ]
          },
          {
            label: "登录密码:",
            ele: "el-input",
            value: params.password || '',
            valueKey: "password",
            type: this.pwdShow,
            className: "input80",
            rules: [
              { required: !params.user_id, message: "登录密码不能为空", trigger:'blur' }
            ],
          },
          {
            label: "手机号:",
            ele: "el-input",
            value: params.phone_number || '',
            valueKey: "phone_number",
            className: "input80",
            rules: [
              { required: true, message: "请输入手机号", trigger:'blur'}
            ]
          },
          {
            label: '状态:',
            ele: 'xd-radio-status',
            valueKey: 'status',
            value: params.status || 'N',
            backValueType: '1',
            placeholder: '请选择状态',
            list: 'status',
          },
          params.status === 'Y' && {
            label: '角色:',
            ele: 'xd-remote-select-list',
            valueKey: 'role_ids',
            value: params['role_ids'] || null,
            placeholder: '请选择角色',
            setting: {  multiple: true,},
            className: 'input80',
            handleCustom:({action, data}) =>{
              setTimeout(()=>{
                data.cb([
                  {"label": "万利达集团", "value": 4},
                  {"label": "中国联通", "value": 5},
                  {"label": "中国移动", "value": 6},
                  {"label": "味多美", "value": 7},
                ])
              },500)
            },
            rules: [
              { required: true, message: "请选择客户名称",trigger: ['change']}
            ]
          },
        ].filter(i => i);
        debugger
        return listForm;
      },

      //检查操作按钮是否显示
      handleRowCheckBtnStatus(data){
        return this.$xdHelper.random(1,1) === 1;
      },

      //在行上面触发的事件(启用禁用｜排序输入)
      //操作成功回调地址 返回1=>成功 2=>失败
      handleRowCustomEvent({value, prop, cb, row}){
        let status = this.$xdHelper.random(1,2);
        setTimeout(()=>{
          cb(status)
        }, 1000)
      },

      //排序功能
      handleSort({data,success,error}){
        let status = this.$xdHelper.random(0,1) === 1;
        setTimeout(()=>{
          if(status) success();
          else  error();
        }, 1000)
      },

      //批量删除
      handleBatchDel({data,success,error}){
        debugger
        let status = this.$xdHelper.random(0,1) === 1;
        setTimeout(()=>{
          if(status) success();
          else  error();
        }, 1000)
      },

      //记录删除
      handleDelete({data,success,error}){
        let status = this.$xdHelper.random(0,1) === 1;
        setTimeout(()=>{
          if(status) success();
          else  error();
        }, 1000)
      },

      //点击操作按钮事件
      handleClickBtnOperation({ row, value, index, rowIndex }){
        console.log(row, value, index, rowIndex);
        debugger
      },
      //获取列表
      handleList({data,success,error}){
        setTimeout(()=> {
          success([
            {
              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'
            }
          ], 2, 1000)
        }, 2000)
      },

      //表头
      handleHeader(){
        return this.headers;
      },

      //搜索条件参数转换
      handleSearchParams(search){
        return search;
      },

      //搜索条件配置参数配置
      handleSearchList(){
        return [
          //input
          {
            label: '订单号:', //label
            ele: 'el-input', //package 名称
            valueKey: 'order_id', //form[valueKey]
            value: '', //v-model
            placeholder: '输入订单号',

          },

          //单位区间显示
          {
            label: '按价格:',
            ele: 'xd-input-range',
            valueKey: 'price_range',
            value: null,
            disabled: false,
            setting: {
              unit: '%',
              icon: 'xd_admin_iconfont xdicon_jiage',
              selectWidth: '110px',
              selectMultiple: false,
              selectPlaceholder: '请选择',
              select: [
                {"label": "分销价", "value": 'dist_price'},
                {"label": "市场价", "value": 'market_price'},
                {"label": "进货价", "value": 'purchase_price'},
              ],
            },
          },

          //多选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type_m', //form[valueKey]
            value: [], //v-model
            placeholder: '请选择加盟商',
            multiple: true, //多选
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //远程搜索选择
          {
            label: '远程搜索:', //label
            ele: 'xd-select-remote', //package 名称
            valueKey: 'product_type_remote', //form[valueKey]
            value: [], //v-model //多选为数组 单选为字符串
            placeholder: '输入关键字进行搜索',
            multiple: false, //多选
          },

          //单选选择
          {
            label: '加盟商:', //label
            ele: 'xd-select-list', //package 名称
            valueKey: 'product_type', //form[valueKey]
            value: '', //v-model
            placeholder: '请选择加盟商',
            multiple: false,
            list: [
              {"label": "万利达集团", "value": 4},
              {"label": "中国联通", "value": 5},
              {"label": "中国移动", "value": 6},
              {"label": "味多美", "value": 7},
            ]
          },

          //状态选择
          {
            label: '状态:', //label
            ele: 'xd-select-status', //package 名称
            valueKey: 'status', //form[valueKey]
            value: '', //v-model
            isAll: true,
            backValueType: '', //返回值类型 1=>返回（Y,N）2=> [true|false] 3=>[1,0] 4=>[1,2]
            placeholder: '请选择',
            list: 'status', //status=>状态  best=>推荐  associate=>关联 yes=>是否 open=> 是否开启  check=>审核
          },

          //区间输入
          {
            label: '卡号区间:', //label
            ele: 'xd-range', //package 名称
            valueKey: ['start_card', 'end_card'], //form[valueKey]
            value: ['', ''], //v-model
            placeholder: ['开始卡号', '结束卡号'],
            width: 400
          },

          //插槽
          {
            label: '插槽:', //label
            ele: 'slot', //package 名称
            slot: 'time',
          },

          //时间插件
          {
            label: '添加时间:', //label
            ele: 'xd-date', //package 名称
            valueKey: ['start_time', 'end_time'], //form[valueKey]
            value: [], //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: ['开始时间', '结束时间'],
          },

          //单时间显示
          {
            label: '活动时间:', //label
            ele: 'xd-date-one', //package 名称
            valueKey: 'date-one', //form[valueKey]
            value: '', //v-model
            format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
            formatValue: 'timestamp', //输出时间格式
            placeholder: '添加活动时间',
          },

          //组合时间组合
          {
            label: '时间筛选:', //label
            ele: 'xd-date-filter',
            children: [
              {
                ele: 'xd-select-list', //package 名称
                valueKey: 'order_type', //form[valueKey]
                value: '', //v-model
                placeholder: '选择下单时间',
                list: [
                  {"label": "万利达集团", "value": 4},
                  {"label": "中国联通", "value": 5},
                  {"label": "中国移动", "value": 6},
                  {"label": "味多美", "value": 7},
                ]
              },
              {
                ele: 'xd-date', //package 名称
                valueKey: ['fitler_start_time', 'fitler_end_time'], //form[valueKey]
                value: [], //v-model
                format: 'yyyy/MM/dd HH:mm:ss',//时间显示格式
                formatValue: 'timestamp', //输出时间格式
                placeholder: ['开始时间', '结束时间'],
              },
            ],
          },

          //远程搜索（单选）
          {
            label: '品牌单选:',
            ele: 'xd-remote-select',
            valueKey: 'remote-select-one',
            value: [
              {value: 'value:Alaska', label: 'label:Alaska'}
            ],
            className: 'input40',
            placeholder: '请选择品牌',
            multiple: false, //是否为多选
            remoteSearch: (query, resolve) => {
              this.handleRemoteSearch({query}, resolve)
            },
            rules: [
              {required: true, message: '请选择品牌', trigger: 'change'},
            ]
          },


          //树框级联（单选）
          {
            label: '树框级联:', //label
            ele: 'xd-cascade', //package 名称
            valueKey: 'cascade', //form[valueKey]
            value: ['yizhi'], //v-model

            disabled: false,
            list: testData,
            setting: {
              isGeRoot: true, //当子集合选择返回父节点选
              filterable: true, //是否过滤操作
              clearable: true, //是否清楚操作
              collapseTags: true, //多选是否清楚操作
              multiple: false, //是否多选
            },
            rules: [
              {required: true, message: '请选择数据', trigger: 'blur'},
            ],
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。'
          },

          //树框级联（多选）
          {
            label: '树框级联:', //label
            ele: 'xd-cascade', //package 名称
            valueKey: 'cascade-more', //form[valueKey]
            value: ['yizhi'], //v-model

            disabled: false,
            list: testData,
            setting: {
              isGeRoot: true, //当子集合选择返回父节点选
              filterable: true, //是否过滤操作
              clearable: true, //是否清楚操作
              collapseTags: true, //多选是否清楚操作
              multiple: true, //是否多选
            },
            rules: [
              {required: true, message: '请选择数据', trigger: 'blur'},
            ],
            inline: false,
            notice: '如：设置16:00前下单，最早可提前2小时；16:00后下单，最早可提前1天。<br />若：用户在16点前下单，最早可选择当前下单时间往后2小时的时间；16点后下单，最早只能选择第2天。'
          },

          //远程选择(单选)
          {
            label: '远程单择:',
            ele: 'xd-remote-select-list',
            valueKey: 'sub_company_id',
            value: '',
            placeholder: '请选择展示企业',
            setting:{
              multiple: false, //是否为多选
            },
            handleCustom:({action, data}) =>{
              setTimeout(()=>{
                data.cb([
                  {label:1, value:1},
                  {label:2, value:2},
                  {label:3, value:3},
                  {label:4, value:4},
                ])
              },2000)
            },
          },
          //远程选择(多选)
          {
            label: '远程多选:',
            ele: 'xd-remote-select-list',
            valueKey: 'sub_company_more',
            value: '',
            setting:{
              multiple: true, //是否为多选
            },
            placeholder: '请选择展示企业',
            handleCustom:({action, data}) =>{
              setTimeout(()=>{
                data.cb([
                  {label:1, value:1},
                  {label:2, value:2},
                  {label:3, value:3},
                  {label:4, value:4},
                ])
              },2000)
            },
          },

          //远程选择(多选)
          {
            label: '远程级联:',
            ele: 'xd-remote-cascade',
            valueKey: 'xd-remote-cascade',
            value: '',
            placeholder: '请选择展示企业',
            props: {
              lazy: true,
              checkStrictly: true,
              multiple: false,
              emitPath:false,
              lazyLoad (node, resolve) {
                const { level } = node;
                setTimeout(() => {
                  const nodes = Array.from({ length: level + 1 })
                    .map(item => ({
                      value: ++id,
                      label: `选项${id}`,
                      leaf: level >= 2
                    }));
                  // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                  resolve(nodes);
                }, 1000);
              }
            }
          },
        ]
      }
    }

  }

</script>

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

  .app-container {
    padding: 0;
    margin: 0!important;


    &__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 5px;

        &-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>
