<template>
  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
    <a-form :form="form">
      <a-form-item
        label="地域"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="area" :defaultValue="0">
          <a-radio-button value="0">不限</a-radio-button>
          <a-radio-button value="按省市">按省市</a-radio-button>
          <a-radio-button value="按区县">按区县</a-radio-button>
          <a-radio-button value="按商圈">按商圈</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="按区县"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-tree-select
          showSearch
          style="width: 300px"
          :value="value"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder='Please select'
          allowClear
          multiple
          treeDefaultExpandAll
          @change="onChange"
          @search="onSearch"
          @select="onSelect"
        >
          <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
            <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
              <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
              <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
            </a-tree-select-node>
            <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
              <a-tree-select-node value='sss' key='random3'>
                <b style="color: #08c" slot="title">sss</b>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
      </a-form-item>

      <a-form-item
        label="性别"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="gender">
          <a-radio-button v-for="sex in toutiaoSex" :key="sex.itemValue" :value="sex.itemValue">{{sex.description}}
          </a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="年龄"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-checkbox value="">不限</a-checkbox>
        <a-checkbox-group v-model="ageRange">
          <a-checkbox v-for="age in toutiaoAgeRange" :key="age.itemValue" :value="age.itemValue">{{age.description}}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item
        label="自定义人群"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="zdyrq">
          <a-radio-button value="as">不限</a-radio-button>
          <a-radio-button value="sd">自定义人群</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="定向逻辑"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-tabs defaultActiveKey="1">
          <a-tab-pane tab="定向" key="1">
            <a-table
              ref="table2"
              bordered
              size="middle"
              rowKey="id"
              :columns="columns2"
              :dataSource="dataSource2"
              :pagination="ipagination2"
              :loading="loading2"
              :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
              @change="handleTableChange2">
              <span slot="action" slot-scope="text, record"></span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane tab="排除" key="2" forceRender>
            <a-table
              ref="table2"
              bordered
              size="middle"
              rowKey="id"
              :columns="columns2"
              :dataSource="dataSource2"
              :pagination="ipagination2"
              :loading="loading2"
              :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
              @change="handleTableChange2">
              <span slot="action" slot-scope="text, record"></span>
            </a-table>
          </a-tab-pane>
          <a-tab-pane tab="同时定向排除" key="3">
            <a-tabs defaultActiveKey="1">
              <a-tab-pane tab="定向" key="1">
                <a-table
                  ref="table2"
                  bordered
                  size="middle"
                  rowKey="id"
                  :columns="columns2"
                  :dataSource="dataSource2"
                  :pagination="ipagination2"
                  :loading="loading2"
                  :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
                  @change="handleTableChange2">
                  <span slot="action" slot-scope="text, record"></span>
                </a-table>
              </a-tab-pane>
              <a-tab-pane tab="排除" key="2" forceRender>
                <a-table
                  ref="table2"
                  bordered
                  size="middle"
                  rowKey="id"
                  :columns="columns2"
                  :dataSource="dataSource2"
                  :pagination="ipagination2"
                  :loading="loading2"
                  :rowSelection="{selectedRowKeys: selectedRowKeys2, onChange: onSelectChange2}"
                  @change="handleTableChange2">
           <span slot="action" slot-scope="text, record">
        </span>
                </a-table>
              </a-tab-pane>
            </a-tabs>
          </a-tab-pane>
        </a-tabs>
      </a-form-item>

      <a-form-item
        label="兴趣定向"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group>
          <a-radio-button value="as">不限</a-radio-button>
          <a-radio-button value="sd">系统推荐</a-radio-button>
          <a-radio-button value="zdy">自定义</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="兴趣分类"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-tree-select
          showSearch
          style="width: 300px"
          :value="value"
          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder='Please select'
          allowClear
          multiple
          treeDefaultExpandAll
          @change="onChange"
          @search="onSearch"
          @select="onSelect"
        >
          <a-tree-select-node value='parent 1' title='parent 1' key='0-1'>
            <a-tree-select-node value='parent 1-0' title='parent 1-0' key='0-1-1'>
              <a-tree-select-node value='leaf1' title='my leaf' key='random'/>
              <a-tree-select-node value='leaf2' title='your leaf' key='random1'/>
            </a-tree-select-node>
            <a-tree-select-node value='parent 1-1' title='parent 1-1' key='random2'>
              <a-tree-select-node value='sss' key='random3'>
                <b style="color: #08c" slot="title">sss</b>
              </a-tree-select-node>
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select>
      </a-form-item>


      <a-form-item
        label="精选流量包"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group>
          <a-radio-button value="llb_bx">不限</a-radio-button>
          <a-radio-button value="rjjx">应用软件精选</a-radio-button>
          <a-radio-button value="yxjx">游戏精选</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="平台"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group>
          <a-radio-button value="as">不限</a-radio-button>
          <a-radio-button value="sd">IOS</a-radio-button>
          <a-radio-button value="sd">Android</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="网络"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-checkbox-group v-model="ageRange">
          <a-checkbox value="">不限</a-checkbox>
          <a-checkbox v-for="netType in toutiaoNetType" :key="netType.itemValue" :value="netType.itemValue">
            {{netType.description}}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item
        label="app行为"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group>
          <a-radio-button value="as">不限</a-radio-button>
          <a-radio-button value="sd">按分类</a-radio-button>
          <a-radio-button value="sd">按app</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="文章分类"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group v-model="isArticleCategory" @change="changeArticleCategoryType">
          <a-radio-button value="unlimit_category">不限</a-radio-button>
          <a-radio-button value="category">文章分类</a-radio-button>
        </a-radio-group>
        <br>
        <a-select
          mode="tags"
          placeholder="选择文章分类"
          style="width: 600px"
          @change="onChange"
          v-if="showArticleCategory"
        >
          <a-select-option v-for="articleCategory in articleCategoryList" :key="articleCategory.itemValue"
                           :value="articleCategory.itemValue">{{articleCategory.itemText}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="手机品牌"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-radio-group @change="changeMobileBrandType" v-model="isMobileBrand">
          <a-radio-button value="unlimit_brand">不限</a-radio-button>
          <a-radio-button value="brand">按品牌</a-radio-button>
        </a-radio-group>
        <br>
        <a-select
          mode="tags"
          placeholder="选择手机品牌"
          style="width: 600px"
          @change="onChange"
          v-if="showMobileBrand"
        >
          <a-select-option v-for="mobileBrand in mobileBrandList" :key="mobileBrand.itemValue"
                           :value="mobileBrand.itemValue">{{mobileBrand.itemText}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="模板名称"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input v-model="templateName"></a-input>
      </a-form-item>


      <a-form-item
        :wrapperCol="{ span: 24 }"
        style="text-align: center"
      >
        <a-button htmlType="submit" type="primary">提交</a-button>
        <a-button style="margin-left: 8px">保存</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
  import {deleteAction, postAction, getAction} from '@/api/manage'

  export default {
    data() {
      return {
        form: this.$form.createForm(this),
        gender: {},
        templateName:'',
        toutiaoSex: {},
        ageRange: [],
        toutiaoAgeRange: {},
        toutiaoNetType: {},
        isMobileBrand: '',
        showMobileBrand: false,
        mobileBrandList: {},
        showArticleCategory: false,
        articleCategoryList: [],
        isArticleCategory: {},
        zdyrq: [],
        area: [],
        value: undefined,
        model1: {},
        model2: {},
        currentRoleId: '',
        queryParam1: {},
        queryParam2: {},
        dataSource1: [],
        dataSource2: [],
        ipagination1: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        ipagination2: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        isorter1: {
          column: 'createTime',
          order: 'desc'
        },
        isorter2: {
          column: 'createTime',
          order: 'desc'
        },
        filters1: {},
        filters2: {},
        loading1: false,
        loading2: false,
        selectedRowKeys1: [],
        selectedRowKeys2: [],
        selectionRows1: [],
        selectionRows2: [],
        columns2: [{
          title: '人群',
          align: 'center',
          dataIndex: 'username',
          width: 120
        },
          {
            title: '属性',
            align: 'center',
            width: 100,
            dataIndex: 'realname'
          },
          {
            title: '创建时间',
            align: 'center',
            width: 80,
            dataIndex: 'status_dictText'
          }],
        url: {
          dictListUrl: 'toutiao/dictitem/list'
        }
      }
    },
    methods: {
      onSelectChange2(selectedRowKeys, selectionRows) {
        this.selectedRowKeys2 = selectedRowKeys
        this.selectionRows2 = selectionRows
      },
      onClearSelected2() {
        this.selectedRowKeys2 = []
        this.selectionRows2 = []
      },
      onChange(value) {
        console.log(value)
        this.value = value
      },
      changeMobileBrandType(value) {
        console.log(this.isMobileBrand);
        if (this.isMobileBrand == 'brand') {
          this.showMobileBrand = true;
        } else {
          this.showMobileBrand = false;
        }
      },
      changeArticleCategoryType(value) {
        console.log(this.isMobileBrand);
        if (this.isArticleCategory == 'category') {
          this.showArticleCategory = true;
        } else {
          this.showArticleCategory = false;
        }
      },
      onSearch() {
        console.log(...arguments)
      },
      onSelect() {
        console.log(...arguments)
      },
      loadData2(arg) {
        if (!this.url.list2) {
          this.$message.error('请设置url.list2属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination2.current = 1
        }
        if (this.currentRoleId === '') return
        let params = this.getQueryParams2()//查询条件
        params.roleId = this.currentRoleId
        this.loading2 = true
        getAction(this.url.list2, params).then((res) => {
          if (res.success) {
            this.dataSource2 = res.result.records
            this.ipagination2.total = res.result.total

          }
          this.loading2 = false
        })
      },
      handleTableChange2(pagination, filters, sorter) {
        if (Object.keys(sorter).length > 0) {
          this.isorter2.column = sorter.field
          this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipagination2 = pagination
        this.loadData2()
      }
    },
    created: function () {
      let params = {};
      params.dictId = '2f7d1020ae8c4a1f8af66087d9319139';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.toutiaoSex = res.result.records
        }
      });
      params = {};
      params.dictId = '2b7fe41318c0f0fb4ae5a3cf5269ab04';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.toutiaoAgeRange = res.result.records
        }
      });
      params = {};
      params.dictId = 'c6c75514b5fa17b25dde56d8e7bbc4e9';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.toutiaoNetType = res.result.records
        }
      });
      params = {};
      params.dictId = '7f907c1dab0a65ce6d115e082cd79acf';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.mobileBrandList = res.result.records
        }
      });
      params = {};
      params.dictId = 'defad85851bf6b1751a49b33d8b13b3b';
      params.pageSize = '1000';
      getAction(this.url.dictListUrl, params).then((res) => {
        if (res.success) {
          this.articleCategoryList = res.result.records
        }
      });
    }
  }
</script>