<template>
  <div class="categorySelectorContainer">
    <!-- <Button type="primary" @click="save">保存</Button> -->
     <div class="item" v-for="(item, index) in categoryData" :key="index">
       <Form ref="formInline" :model="item" inline>
          <FormItem label="素材名称" prop="name">
            <Input v-model="item.name" placeholder="" />
          </FormItem>
          <FormItem label="素材图片" prop="img">
            <Upload v-model="item.img"></Upload>
          </FormItem>
          <FormItem label="利益点" prop="text">
            <Input v-model="item.text" placeholder="" />
          </FormItem>
          <FormItem label="logo图" prop="logoUrl">
            <Upload v-model="item.logoUrl"></Upload>
          </FormItem>
          <FormItem label="跳转链接" prop="link">
            <Input v-model="item.link" placeholder="" />
          </FormItem>
       </Form>
       <Button long type="error" @click="del(index)">删除</Button>
     </div>
     <Button type="ghost" @click="add">添加项目</Button>
     <Modal v-model="showModal" :mask-closable="false" title="选择品类/品牌" width="700">
        <Tabs :value="type" @on-click="selectType">
            <TabPane label="品类" name="1">
              <div class="search">
                <Form class="searchFormStyle" inline>
                    <FormItem label="类目名称" prop="name">
                      <Input v-model="searchParams.name" placeholder="" />
                    </FormItem>
                    <FormItem label="类目编码" prop="name">
                      <Input v-model="searchParams.sceneId" placeholder="" />
                    </FormItem>
                    <Button type="primary" @click="search">查询</Button>
                </Form>
              </div>
              <Table
                :columns="tableColumn"
                :data="tableData"
                class="tableStyle"
                :loading="loading"
              />
              <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
            </TabPane>
            <TabPane label="品牌" name="2">
              <div class="search">
                <Form class="searchFormStyle" inline>
                  <FormItem label="品牌名称" prop="name">
                    <Input v-model="searchParams.name" placeholder="" />
                  </FormItem>
                  <FormItem label="品牌编码" prop="name">
                    <Input v-model="searchParams.sceneId" placeholder="" />
                  </FormItem>
                  <Button type="primary" @click="search">查询</Button>
                </Form>
              </div>
              <Table
                :columns="tableColumn"
                :data="tableData"
                class="tableStyle"
                :loading="loading"
              />
              <Page class="page" :total="total" @on-change="changePageNo" show-total></Page>
            </TabPane>
        </Tabs>
        <div slot="footer" />
     </Modal>
  </div>
</template>
<script>
import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
import operationApi from '@api/operation.api';
// const validOptions = {
//   pageName: [
//     { required: true, message: '请输入页面名称', trigger: 'blur' }
//   ],
//   shareOpenMethod: [
//     { validator: this.validateOpenMethod, trigger: 'blur'  }
//   ],
// };
const categoryCol = function() {
  return [
    {
      align: 'center',
      title: '类目名称',
      key: 'categoryName',
    },
    {
      align: 'center',
      title: '类目编码',
      key: 'sceneId',
      width: 120
    },
    {
      align: 'center',
      title: '类目级别',
      key: 'categoryLevel',
      width: 120
    },
    {
      align: 'center',
      title: '图片',
      render: (h, params) => {
        const row = params.row;
        return h('div', {
          style: {
            padding: '5px 0'
          }
        }, [
            h('img', {
              attrs: {
                src: row.imgUrl,
                width: 80,
                height: 80
              },
            })
          ]
        )
      },
      width: 120
    },
    {
      align: 'center',
      title: '操作',
      width: 120,
      render: (h, params) => {
        const row = params.row;
        return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  this.select(row);
                }
              }
            }, '选择')
          ]
        )
      }
    },
  ]
}

const brandCol = function() {
  return [
    {
      align: 'center',
      title: '品牌名称',
      key: 'brandName',
    },
    {
      align: 'center',
      title: '品牌编码',
      key: 'sceneId',
      width: 120
    },
    {
      align: 'center',
      title: 'logo',
      render: (h, params) => {
        const row = params.row;
        return h('div', {
          style: {
            padding: '5px 0'
          }
        }, [
            h('img', {
              attrs: {
                src: row.imgUrl,
                width: 80,
                height: 80
              },
            })
          ]
        )
      },
      width: 300
    },
    {
      align: 'center',
      title: '操作',
      width: 120,
      render: (h, params) => {
        const row = params.row;
        return h('div', [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              on: {
                click: () => {
                  this.select(row);
                }
              }
            }, '选择')
          ]
        )
      }
    }
  ]
}
export default {
  components: {
    Upload
  },
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    value(val) {
      this.categoryData = val;
    },
    categoryData: {
      handler(val) {
        this.$emit('input', val);    
      },
      deep: true
    }
  },
  methods: {
    search() {
      this.searchParams.pageNo = 1;
      this.searchParams.pageSize = 10;
      this.getData();
    },
    add() {
      this.showModal = true;
      this.getData();
    },
    del(index) {
      this.categoryData.splice(index, 1)
    },
    changePageNo(val) {
      this.searchParams.pageNo = val;
      this.getData();
    },
    selectType(val) {
      this.type = val;
      let searchParams = {};
      searchParams.pageSize = 10;
      searchParams.pageNo = 1;
      searchParams.name = '';
      searchParams.sceneId = '';
      this.searchParams = searchParams;
      this.getData();
    },
    async getData() {
      let res;
      this.loading = true;
      this.tableData = [];
      this.tableColumn = this.type == 1 ? categoryCol.bind(this)() : brandCol.bind(this)();
      try {
        if (this.type == 1) {
          // 品类
          res = await operationApi.getCategoryAndPriority(this.searchParams);
        } else {
          // 品牌
          res = await operationApi.getBrandAndPriority(this.searchParams);
        }
        this.$nextTick(() => {
          this.loading = false
          this.total = res.total || 0;
          this.tableData = res.records || [];
        })
      } catch (e) {
        this.loading = false;
      }
    },
    select(data) {
      this.categoryData.push({
        name: data.categoryName || data.brandName || '',
        img: data.imgUrl || '',
        text: '',
        logoUrl: '',
        link: ''
      })
      this.showModal = false;
      this.type = '1';
      this.searchParams = {
        pageSize: 10,
        pageNo: 1,
        name: '',
        sceneId: ''
      }
    }
  },
  data() {
    return {
      showModal: false,
      categoryData: [],
      type: '1',
      tableData: [],
      tableColumn: [],
      total: 0,
      searchParams: {
        pageSize: 10,
        pageNo: 1,
        name: '',
        sceneId: ''
      },
      loading: false
    }
  },
  created() {
    this.categoryData = JSON.parse(JSON.stringify(this.value));
  }
}
</script>
<style scoped lang="less">
.item{
  border: 1px solid #dddee1;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 5px;
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.categorySelectorContainer{
  /deep/ .ivu-form-item{
    margin-bottom: 10px;
  }
  /deep/ .ivu-form-item-label{
    width: 80px !important;
  }
}

.inline {
  display: inline-block;
}

.searchFormStyle {
  text-align: left;
  clear: both;
  background-color: #fff;
  padding: 4px;
  min-height: 70px;
  font-size: 0;
  display: flex;
  align-items: center;
  .btnGroupStyle{
    button{
      margin-right: 6px;
    }
  }
  /deep/ .ivu-form-item{
    margin-bottom: 0;
  }
  /deep/ .ivu-form-item-label {
    font-weight: bold;
    display: inline-block;
  }

  /deep/.ivu-form-item-content {
    display: inline-block;
  }
}
</style>
