<style>
#table_time_selected1 tr {
  border: 1px solid rgb(102, 162, 243);
}

.plug-timer-grid th {
  line-height: 25px;
}
.group-creat .ant-form-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: #f5222d;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '';
}
.else-label .ant-form-item-label label::after {
  content: '';
  position: relative;
  top: -0.5px;
  margin: 0 8px 0 2px;
}
</style>
<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
    <a-row class="image-list-heading vm-panel">
      <a-col :span="24" style="display:flex">
        <Treeselect :appId.sync="appId" :multiple="false" style="margin:8px 0px" />
        <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
      </a-col>
    </a-row>
    <a-button type="primary" @click=";(visible = true), (populationData = {}), (active = 'add')" :disabled="!appId">
      创建模板
    </a-button>
    <a-row style="margin-top:15px">
      <a-table size="middle" :columns="columns" :dataSource="dataList" bordered :pagination="ipagination">
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-row>
    <a-modal v-model="visible" title="广告组创建信息" :width="900" v-if="visible" :maskClosable="false">
      <a-form-item
        label="模板名称"
        :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
        :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
      >
        <a-input placeholder="请输入模板名称" v-model="name" style="width:100%;position:relative;" />
      </a-form-item>

      <targeted-population ref="population" :populationData.sync="populationData"></targeted-population>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleSubmit">
          确定
        </a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
import { getAction, postAction, deleteAction, putAction } from '@/api/manage'
import moment from 'moment'
import { mapGetters } from 'vuex'
import jq from 'jquery'
import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
import targetedPopulation from '@/views/modules/kuaishouapp/account/stepForm/stepModule/targetedPopulation.vue'
export default {
  name: 'new-mould',
  components: {
    targetedPopulation,
    Treeselect
  },
  data() {
    return {
      dataList: [],
      name: '',
      columns: [
        {
          title: '模板名称',
          align: 'center',
          dataIndex: 'templateName',
          scopedSlots: { customRender: 'templateName' }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      appId: '',
      populationData: {
        // platform_os: '1',
        // is_open: '0',
        // gender: '1',
        // network: '1',
        // interest_video: [2, 3],
        // ages_range: ['12', '41'],
        // device_brand: ['2', '9'],
        // device_price: ['5', '9'],
        // fans_star: [2, 3, 4, 5],
        // app_interest: [3, 4],
        // android_osv: '4',
        // business_interest_type: '2',
        // business_interest: [34328, 34330],
        // no_age_break: 0,
        // no_gender_break: 0,
        // no_area_break: 0,
        // region: [
        //   11,
        //   12,
        //   13,
        //   14,
        //   15,
        //   21,
        //   22,
        //   23,
        //   31,
        //   32,
        //   33,
        //   34,
        //   35,
        //   36,
        //   37,
        //   41,
        //   42,
        //   43,
        //   44,
        //   45,
        //   46,
        //   50,
        //   51,
        //   52,
        //   53,
        //   54,
        //   61,
        //   62,
        //   63,
        //   64,
        //   65,
        //   71,
        //   81,
        //   82
        // ],
        // allForm: {
        //   regionType: 'limit',
        //   region: [
        //     { label: '北京', value: 11 },
        //     { label: '天津', value: 12 },
        //     { label: '河北', value: 13 },
        //     { label: '山西', value: 14 },
        //     { label: '内蒙古', value: 15 },
        //     { label: '辽宁', value: 21 },
        //     { label: '吉林', value: 22 },
        //     { label: '黑龙江', value: 23 },
        //     { label: '上海', value: 31 },
        //     { label: '江苏', value: 32 },
        //     { label: '浙江', value: 33 },
        //     { label: '安徽', value: 34 },
        //     { label: '福建', value: 35 },
        //     { label: '江西', value: 36 },
        //     { label: '山东', value: 37 },
        //     { label: '河南', value: 41 },
        //     { label: '湖北', value: 42 },
        //     { label: '湖南', value: 43 },
        //     { label: '广东', value: 44 },
        //     { label: '广西', value: 45 },
        //     { label: '海南', value: 46 },
        //     { label: '重庆', value: 50 },
        //     { label: '四川', value: 51 },
        //     { label: '贵州', value: 52 },
        //     { label: '云南', value: 53 },
        //     { label: '西藏', value: 54 },
        //     { label: '陕西', value: 61 },
        //     { label: '甘肃', value: 62 },
        //     { label: '青海', value: 63 },
        //     { label: '宁夏', value: 64 },
        //     { label: '新疆', value: 65 },
        //     { label: '台湾', value: 71 },
        //     { label: '香港', value: 81 },
        //     { label: '澳门', value: 82 }
        //   ],
        //   ageType: 'ageLimit',
        //   ages_range: [],
        //   age: [],
        //   device: '1',
        //   price: '1',
        //   appType: '1',
        //   fansStar: '1',
        //   interestVideo: '1'
        // }
      },
      active: 'add',
      editId: '',
      visible: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        onChange: current => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipagination.current = current
          this.addUser()
        },
        total: 0
      }
    }
  },
  computed: {},
  filters: {},
  methods: {
    handleSubmit(e) {
      //   this.$refs.population.handleSubmit()
      e.preventDefault()
      this.$refs.population.handleSubmit()
      var data = this.populationData
      console.log(JSON.stringify(data))
      if (this.active == 'add') {
        postAction('/kuaishou/batch/addDirectionalTemplate', {
          accountId: this.appId,
          templateName: this.name,
          templateContent: JSON.stringify(this.populationData)
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.visible = false
            this.populationData = {}
            this.name = ''
            this.addUser()
          }
        })
      } else if (this.active == 'edit') {
        putAction('/kuaishou/batch/editDirectionalTemplate', {
          id: this.editId,
          templateName: this.name,
          templateContent: JSON.stringify(this.populationData)
        }).then(res => {
          console.log(res)
          if (res.success) {
            this.visible = false
            this.populationData = {}
            this.name = ''
            this.addUser()
          }
        })
      }
    },
    getData(className) {
      return this.form.getFieldValue(className)
    },
    handleEdit(item) {
      this.active = 'edit'
      this.editId = item.id
      this.name = item.templateName
      this.populationData = JSON.parse(item.templateContent)
      this.visible = true
    },
    handleDelete(id) {
      deleteAction('/kuaishou/batch/deleteDirectionalTemplate', { id: id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.addUser()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    addUser() {
      this.loading = true
      this.dataList = []
      var params = {}
      params.accountId = this.appId + ''
      if (this.appId) {
        getAction('/kuaishou/batch/getDirectionalTemplate', params).then(res => {
          if (res.success) {
            this.dataList = res.result.map((item, index) => {
              return {
                ...item,
                key: index
              }
            })
            this.ipagination.total = res.result.length
          }
        })
      } else {
        this.$message.error('请选择账户')
      }
    }
  },
  mounted: function() {
    //   /kuaishou/batch/getDirectionalTemplate
  }
}
</script>
