<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="产品名称">
              <a-input placeholder="请输入产品名称" v-model="productName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="广告主名称">
              <a-input placeholder="请输入广告主名称" v-model="advertiserName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域-begin -->
    <!-- 供应商 -->
    <div>

      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
        :pagination="ipagination" :loading="loading" @change="handleTableChange"
        style="word-break: break-all;font-size:16px;font-weight:600">
        <span slot="mediaId"
          slot-scope="mediaId">{{ mediaId == 1 ? '头条' :mediaId == 2? '快手':mediaId == 3?'头条内广':'快手内广' }}</span>
        <span slot="projectList" slot-scope="text">
          <span v-for="(item,index) in text"
            :key="index">{{index+1}}.{{item.projectName}}{{index==(text.length-1)?'':';'}}</span>
        </span>
        <span slot="yunyingList" slot-scope="text">
          <span v-for="(item,index) in text" :key="index">{{item.realname}}{{index==(text.length-1)?'':','}}</span>
        </span>
        <span slot="saleList" slot-scope="text">
          <span v-for="(item,index) in text" :key="index">{{item.saleName}}{{index==(text.length-1)?'':','}}</span>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleAddList(record)">绑定项目</a>

          <a-divider type="vertical" />

          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />

          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <project-modal ref="modalForm" @ok="modalFormOk"></project-modal>
    <a-modal title="项目展示" :width="800" :visible="visible" :footer="null" @cancel="handleCancel" destroyOnClose
      cancelText="关闭">
      <a-button @click="handleProjectAdd" type="primary" icon="plus" style="margin:20px 0">新增</a-button>
      <a-list bordered :data-source="dataList">
        <a-list-item slot="renderItem" slot-scope="item, index">
          {{ item.projectName }}
          <div slot="actions">
            <a @click="removeTitleCun(item,index)">删除</a>
          </div>
        </a-list-item>

        <!-- <div slot="header">
          Header
        </div>
        <div slot="footer">
          Footer
        </div> -->
      </a-list>
    </a-modal>
    <a-modal title="新增项目" :width="800" :visible="visibleAdd" :confirmLoading="confirmLoading" @ok="handleOk"
      destroyOnClose cancelText="关闭" @cancel="handleCancelAdd">
      <a-select optionFilterProp="children" showSearch :filterOption="filterOption" mode="multiple" v-model="projectIds"
        style="width:100%">
        <a-select-option :value="item.id" v-for="(item, index) of supplierList" :key="index">{{
              item.projectName
            }}</a-select-option>
      </a-select>
    </a-modal>
  </a-card>
</template>

<script>
  import ProjectModal from './modules/productModal'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  import {
    httpAction,
    getAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import {
    JeecgListMixin
  } from '@/mixins/ipagination'

  export default {
    name: 'ProjectList',
    mixins: [JeecgListMixin],
    components: {
      ProjectModal,
      JTreeSelect
    },
    data() {
      return {
        description: '产品管理页面',
        loading: false,
        visible: false,
        visibleAdd: false,
        dataList: [],
        productIdDelete: null,
        confirmLoading: false,
        projectIds: [],
        supplierList: [],
        advertiserId: null,
        // 表头
        columns: [

          {
            title: '媒体',
            align: 'center',
            dataIndex: 'mediaId',
            scopedSlots: {
              customRender: 'mediaId'
            },
            width: 100
          }, {
            title: '产品名称',
            align: 'center',
            dataIndex: 'productName',
            width: 200
          },
          {
            title: '广告主名称',
            align: 'center',
            dataIndex: 'advertiserName',
            width: 200
          },
          {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectList',
            scopedSlots: {
              customRender: 'projectList'
            },
          },
          {
            title: '运营',
            align: 'center',
            dataIndex: 'yunyingList',
            scopedSlots: {
              customRender: 'yunyingList'
            },
            width: 120,

          },
          {
            title: '销售',
            align: 'center',
            dataIndex: 'saleList',
            scopedSlots: {
              customRender: 'saleList'
            },
            width: 120
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: {
              customRender: 'action'
            },
            width: 300
          }
        ],
        dataSource: [],
        url: {
          list: '/ctop/product/getProductList',
          delete: '/ctop/product/deleteProduct',
          deleteBatch: '/ctop/project/deleteBatch',
          exportXlsUrl: 'ctop/project/exportXls',
          importExcelUrl: 'ctop/project/importExcel'
        },
        options: [],
        advertiserName: null,
        productName: null,
      }
    },
    computed: {},
    watch: {
      'ipagination.current': function (n, o) {
        console.log(n, o)
        if (n != o) {
          this.tableHttp()
        }

      }
    },
    methods: {
      searchQuery() {
        this.tableHttp()
      },
      searchReset() {
        this.advertiserName = null
        this.productName = null
        this.tableHttp()
      },
      handleTableChange() {

      },
      handleDelete: function (id) {
        if (!this.url.delete) {
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        postAction(that.url.delete, {
          productId: id
        }).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            this.ipagination.current = 1
            this.tableHttp()
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      handleProjectAdd() {
        this.visibleAdd = true
        // this.supplierList = 
        postAction('/ctop/product/getProjectListByAdvertiserId', {
          "advertiserId": this.advertiserId
        }).then(res => {
          if (res.success) {
            this.supplierList = res.result
            this.projectIds = this.dataList.map(item => {
              return item.projectId
            })
          }
        })
      },
      handleCancelAdd() {
        this.visibleAdd = false
      },
      handleOk() {
        this.confirmLoading = true
        postAction('/ctop/product/insertProductProjectMap', {
          "productId": this.productIdDelete,
          "projectIds": this.projectIds
        }).then(res => {
          if (res.success) {
            this.confirmLoading = false
            this.visibleAdd = false
            this.handleCancel()
          } else {
            this.confirmLoading = false
            this.$message.error(res.message)
          }
        })
      },
      removeTitleCun(item, index) {
        postAction('/ctop/product/deleteByProjectIdAndProductId', {
          "projectId": item.projectId,
          "productId": this.productIdDelete
        }).then(res => {
          if (res.success) {
            this.dataList.splice(index, 1)
            this.tableHttp()
          }
        })
      },
      handleCancel() {
        this.visible = false
        this.tableHttp()
      },

      handleAddList(record) {
        this.visible = true
        this.dataList = record.projectList
        this.productIdDelete = record.id
        this.advertiserId = record.advertiserId
      },
      handleEdit: function (record) {
        console.log(record)
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleAdd: function () {
        this.$refs.modalForm.add();
        this.$refs.modalForm.title = "新增";
        this.$refs.modalForm.disableSubmit = false;
      },
      modalFormOk() {
        this.ipagination.current = 1
        this.tableHttp()
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      },
      tableHttp() {
        this.loading = true;
        this.dataSource = []
        var params = {}
        params.pageNum = this.ipagination.current
        params.pageSize = this.ipagination.pageSize
        params.advertiserName = this.advertiserName
        params.productName = this.productName
        // {"pageNum":1,"pageSize":10,"advertiserName":"","productName":""}
        postAction('/ctop/product/getProductList', params).then(res => {
          if (res.success) {
            // console.log(res)
            this.loading = false;
            this.ipagination.total = res.result.total
            this.dataSource = res.result.list
          }
        })
      },
    },
    mounted() {
      this.tableHttp()
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>