<style>
.my-project .ant-tabs-nav-scroll {
  display: flex;
  justify-content: center;
}

.close-account-my-project .ant-modal-footer .ant-btn-primary {
  display: none;
}

.only .ant-badge-count {
  right: -16px;
}
</style>
<template>
  <a-card
    :bordered="false"
    :tabList="tabListNoTitle"
    :activeTabKey="noTitleKey"
    @tabChange="(key) => onTabChange(key, 'noTitleKey')"
    class="my-project"
  >
    <!-- 查询区域 -->
    <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="keyWord"></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>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
      >
      <span slot="bidType" slot-scope="text">
        <div v-if="text && JSON.parse(text).length > 0">
          <span v-for="(item, index) of JSON.parse(text)" :key="index"
            >{{ item | bidTypeData }}{{ index == JSON.parse(text).length - 1 ? '' : '、' }}</span
          >
        </div>
        <div v-else>-</div>
      </span>
      <span slot="ocpxActionType" slot-scope="text,record">
        <div v-if="!!record.ocpxActionType&&JSON.parse(record.ocpxActionType).length>0">
          <span v-for="(item, index)  in JSON.parse(record.ocpxActionType)" :key="index"
            >{{item.ocpxName}}({{(item.maxValue / 1000).toFixed(2)}})<br>
            <!-- <span v-if="item instanceof Object">{{item.ocpxName}}({{(item.maxValue / 1000).toFixed(2)}})<br></span>
            <span v-else>{{(item / 1000).toFixed(2)}}</span> -->
            </span
          >
        </div>
        <div v-else>-</div>

        <!-- {{ text | ocpxActionType }} -->
      </span>
      <span slot="deepConversionType" slot-scope="text,record">
        <div v-if="!!record.deepConversionType&&JSON.parse(record.deepConversionType).length != 0">
          <span v-for="(item, index)  in JSON.parse(record.deepConversionType)" :key="index"
            >{{item.deepName}}({{(item.deepValue / 1000).toFixed(2)}})<br></span
          >
        </div>
        <div v-else>-</div>

        <!-- {{ text | ocpxActionType }} -->
      </span>
        <span slot="maxBid" slot-scope="maxBid,record">{{ record.maxBid == 0? '-': (record.maxBid / 1000).toFixed(2) }}</span>
        <span slot="mediaId" slot-scope="mediaId">{{
          mediaId == 1 ? '头条' : mediaId == 2 ? '快手' : mediaId == 3 ? '头条内广' : mediaId == 4 ? '快手内广':mediaId== 5 ? '千川' :mediaId== 6 ? '磁力金牛'   :mediaId== 12 ? '小红书'  :mediaId== 13 ? 'b站'  :mediaId== 14 ? '快手' :mediaId== 15 ? '阿里UC' :mediaId== 16 ? '腾讯' :'其他'
        }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleSync(record)" v-if="noTitleKey == 'myProject'&&(userInfo().id=='a6abfea0f27843bf8595a234410afb04'
          ||userInfo().id=='e9ca23d68d884d4ebb19d07889727dae')">推送素材</a>
          <a-divider type="vertical" v-if="noTitleKey == 'myProject'"/>
          <a @click="handleEdit(record)">{{ noTitleKey == 'myProject' ? '查看成员' : '账号绑定' }}</a>
          <a-divider type="vertical" />
          <a @click="addParams(record)">{{ noTitleKey == 'myProject' ? '新增人员' : '查看账户' }}</a>
          <a-divider type="vertical" v-if="noTitleKey == 'myProject'" />
          <a-badge :count="record.needExamine" class="only">
            <a
              @click="projectLook(record)"
              v-if="noTitleKey == 'myProject'"
              :disabled="record.needExamine == 0 || record.needExamine == null"
              >待办事项</a
            >
          </a-badge>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!--  查看项目成员 -->
    <a-modal
      :maskClosable="false"
      :title="title"
      v-model="visible"
      width="800px"
      class="close-account-my-project"
    >
      <div style="display: flex; line-height: 50px; flex-wrap: wrap">
        <div style="width: 25%; text-align: center" v-for="(item, index) of memberList" :key="index">
          <a-tag color="#2db7f5" @close="log(item.id)" closable>
            {{ item.userName }}
            <a-divider type="vertical" />
            {{ item.roleCode | roleCode }}
          </a-tag>
        </div>
      </div>
    </a-modal>

    <!--  添加项目成员 -->
    <a-modal
      :maskClosable="false"
      title="添加项目成员"
      v-model="visibleAdd"
      @ok="handleOkAdd"
      :confirmLoading="confirmLoading"
    >
      <!-- /sys/user/getAllUserList -->
      <a-select
        v-model="appId"
        showSearch
        allowClear
        mode="multiple"
        placeholder="请选择成员"
        optionFilterProp="children"
        style="width: 100%"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="handleChange"
        :filterOption="true"
        @search="search"
        :maxTagCount="1"
      >
        <a-select-option
          v-for="appModel in options"
          :key="appModel.userId + new Date().getTime()"
          :value="appModel.userId"
        >
          {{ appModel.realName }}
          &#12288;&#12288;{{ appModel.roleName }}
        </a-select-option>
      </a-select>
    </a-modal>

    <!-- 账号绑定 -->
    <a-modal
      :maskClosable="false"
      title="账号绑定"
      v-model="visibleBind"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :width="800"
      :okButtonProps="{ props: { disabled: false } }"
      :cancelButtonProps="{ props: { disabled: false } }"
    >
      <a-form :form="formEdit">
        <a-form-item
          label="选择方式"
          :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
          :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
        >
          <a-radio-group buttonStyle="solid" v-model="mode" @change="onChageLogin">
            <a-radio-button value="authorization">授权</a-radio-button>
            <a-radio-button value="login">登录</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <div v-if="mode == 'authorization'">
          <a-form-item
            label="媒体："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group buttonStyle="outline" v-model="loginType">
              <a-radio-button value="kuaishou">快手</a-radio-button>
              <a-radio-button value="bytedance">头条</a-radio-button>
            </a-radio-group>
            <br />
            <span style="color: red" v-if="loginType == 'bytedance'"
              >*重要:如存在一户多开情况,请勾选所有子账号进行授权!!!</span
            >
          </a-form-item>
          <a-form-item
            label="授权时间："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-date-picker 
              v-model="dateValue"
              style="width: 180px;"
              :allowClear="false"
              format="YYYY-MM-DD"
              :disabled-date="disabledDate"
              @change="handleCostTimeChange" 
            />
          </a-form-item>
          <a-form-item
            label="开户代理商："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
            v-if="loginType == 'kuaishou'"
          >
            <a-radio-group buttonStyle="outline" v-model="id">
              <!-- <a-radio-button value="0">否</a-radio-button>
              <a-radio-button value="1">是</a-radio-button> -->
              <a-radio-button v-for="item in authConfigList" :key="item.id" :value="item.id">{{
                item.agentName
              }}</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="系统类型："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group buttonStyle="outline" v-model="systemType">
              <a-radio-button value="不限">不限</a-radio-button>
              <a-radio-button value="ios">ios</a-radio-button>
              <a-radio-button value="android">android</a-radio-button>
              <a-radio-button value="4">其他</a-radio-button>
            </a-radio-group>
            <a-input v-model="systemTypeName" v-if="systemType == '4'" placeholder="请输入系统类型" />
          </a-form-item>
          <a-form-item
            label="预警金额"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <!-- <a-input v-decorator="['warningAmount', { rules: [{ required: true, message: '请输入预警金额' }] }]" /> -->
            <a-input-number
              style="width: 50%"
              v-decorator="[
                'warningAmount',
                { rules: [{ required: true, message: '请输入预警金额' }], initialValue: 5000 },
              ]"
            />
          </a-form-item>
          <a-form-item
            label="预警比例"
            :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-input-number
              :step="0.1"
              style="width: 50%"
              v-decorator="[
                'warningProportion',
                { rules: [{ required: true, message: '请输入预警比例' }], initialValue: 1.5 },
              ]"
            />
          </a-form-item>
        </div>
        <div v-else>
          <a-form-item
            label="媒体："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
          >
            <a-radio-group buttonStyle="outline" v-model="loginType">
              <a-radio-button value="pangolin">穿山甲</a-radio-button>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="账号："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
            v-show="mode == 'login'"
          >
            <a-input v-model="accountName" placeholder="请输入账户名" />
          </a-form-item>
          <a-form-item
            label="密码："
            :label-col="{ xs: { span: 24 }, sm: { span: 5 } }"
            :wrapper-col="{ xs: { span: 24 }, sm: { span: 16 } }"
            v-show="mode == 'login'"
          >
            <a-input type="password" v-model="password" placeholder="请输入密码" />
          </a-form-item>
        </div>
        <a-form-item
          label="自动投放"
          :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
          :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
        >
          <a-radio-group
            buttonStyle="outline"
            v-decorator="[
              'autoDelivery',
              { rules: [{ required: true, message: '请选择是否自动投放' }], initialValue: 1 },
            ]"
          >
            <a-radio-button :value="1">允许</a-radio-button>
            <a-radio-button :value="3">禁止</a-radio-button>
          </a-radio-group>
        </a-form-item>
        <a-form-item
          label="物料同步"
          :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
          :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
        >
          <checkBoxGroup
                :options="[
                  { label: '不同步', value: 0 },
                  { label: '应用包', value: 1 },
                  { label: '人群包', value: 2, disabled:true},
                  { label: '定向包', value: 3, disabled:true },
                ]"
                v-decorator="['materialType', { rules: [{ required: true, message: '请选择同步物料' }], initialValue: [0] }]"
                @change="changeData"
              />
        </a-form-item>
        <a-form-item
          label="数据同步"
          :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
          :wrapperCol="{ xs: { span: 24 }, sm: { span: 16 } }"
          v-if="loginType == 'kuaishou'"
        >
          <a-radio-group
            buttonStyle="outline"
            v-decorator="[
              'dataSync',
              { rules: [{ required: true, message: '请选择是否数据同步' }], initialValue: 1 },
            ]"
          >
            <a-radio-button :value="1">同步</a-radio-button>
            <a-radio-button :value="2">不同步</a-radio-button>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </a-modal>

    <!--  查看项目下的账号 -->
    <a-modal
      :maskClosable="false"
      :title="titleAccount"
      v-model="visibleAccount"
      width="800px"
      class="close-account-my-project"
    >
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columnsAccount"
        :dataSource="dataAccount"
        :pagination="ipaginationAccount"
        :loading="loadingAccount"
      >
        <span slot="createTime" slot-scope="createTime">{{ createTime | getDate }}</span>
      </a-table>
    </a-modal>

    <!-- 待办事件审核 -->
    <a-modal
      :maskClosable="false"
      title="待办事件审核"
      v-model="projectVisible"
      @ok="handleOkProject"
      width="800px"
      class="close-account-my-project"
      :footer="null"
    >
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columnsProject"
        :dataSource="dataProject"
        :pagination="ipaginationAccount"
        :loading="loadingAccount"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="projectEdit(record, 1)">通过</a>
          <a-divider type="vertical" />
          <a @click="projectEdit(record, 2)">拒绝</a>
        </span>
      </a-table>
    </a-modal>

        <!--  查看项目下的账号 -->
    <a-modal
      :maskClosable="false"
      title="推送素材"
      v-model="visibleMaterial"
      @ok="handleOk"
      width="800px"
    >
      <a-input-search
        :style="{width:'150px',marginBottom:'15px'}"
        placeholder="请输入项目名称"
        v-model="keyWordMaterial"
        @search="getMaterialListPageNo"
      ></a-input-search>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columnsMaterial"
        :dataSource="dataMaterial"
        :pagination="ipaginationMaterial"
        :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
        :loading="loadingMaterial"
      >
      </a-table>
    </a-modal>
  </a-card>
</template>

<script>
import moment from 'moment';
import { httpAction, getAction, deleteAction, putAction } from '@/api/manage'

import { mapGetters } from 'vuex'

import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'

import { JeecgListMixin } from '@/mixins/ipagination'
import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
const myProjectColumns = [
  {
    title: '项目名称',
    align: 'center',
    dataIndex: 'projectName',
  },
  {
    title: '广告主名称',
    align: 'center',
    dataIndex: 'advertiserId_dictText',
  },
  {
    title: '产品名称',
    align: 'center',
    dataIndex: 'productId_dictText',
  },

  {
    title: '运营负责人',
    align: 'center',
    dataIndex: 'responsibleId_dictText',
  },
  {
    title: '设计负责人',
    align: 'center',
    dataIndex: 'designResponsibleId_dictText',
  },
  {
    title: '媒体类型',
    align: 'center',
    dataIndex: 'mediaId',
    scopedSlots: {
      customRender: 'mediaId',
    },
  },
  {
    title: '优化目标',
    align: 'center',
    dataIndex: 'bidType',
    scopedSlots: {
      customRender: 'bidType',
    },
  },
  {
    title: '最高出价(元)',
    align: 'center',
    dataIndex: 'maxBid',
    scopedSlots: {
      customRender: 'maxBid',
    },
  },
  {
    title: '转化目标(出价/元)',
    align: 'center',
    dataIndex: 'ocpxActionType',
    scopedSlots: {
      customRender: 'ocpxActionType',
    },
  },
  {
    title: '深度转化目标(出价)',
    align: 'center',
    dataIndex: 'deepConversionType',
    scopedSlots: {
      customRender: 'deepConversionType',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: {
      customRender: 'action',
    },
  },
]
const participationColumns = [
  {
    title: '项目名称',
    align: 'center',
    dataIndex: 'projectName',
  },
  {
    title: '广告主名称',
    align: 'center',
    dataIndex: 'advertiserName',
  },
  {
    title: '产品名称',
    align: 'center',
    dataIndex: 'productName',
  },
  {
    title: '运营负责人',
    align: 'center',
    dataIndex: 'responsibleName',
  },
  {
    title: '设计负责人',
    align: 'center',
    dataIndex: 'designResponsibleName',
  },
  {
    title: '媒体类型',
    align: 'center',
    dataIndex: 'mediaId',
    scopedSlots: {
      customRender: 'mediaId',
    },
  },
  {
    title: '优化目标',
    align: 'center',
    dataIndex: 'bidType',
    scopedSlots: {
      customRender: 'bidType',
    },
  },
  {
    title: '最高出价(元)',
    align: 'center',
    dataIndex: 'maxBid',
    scopedSlots: {
      customRender: 'maxBid',
    },
  },
  {
    title: '转化目标(出价/元)',
    align: 'center',
    dataIndex: 'ocpxActionType',
    scopedSlots: {
      customRender: 'ocpxActionType',
    },
  },
  {
    title: '深度转化目标(出价)',
    align: 'center',
    dataIndex: 'deepConversionType',
    scopedSlots: {
      customRender: 'deepConversionType',
    },
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: {
      customRender: 'action',
    },
  },
]
export default {
  name: 'ProjectMemberList',
  components: {
    JSelectUserByDep,
    checkBoxGroup
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      moment,
      dateValue: '',
      authConfigList:[],
      title: '',
      titleAccount: '',
      description: '我的项目',
      // 表头
      visible: false,
      keyWord: '',
      keyWordMaterial:'',
      mode: 'authorization',
      mediaId: '2',
      accountName: '',
      password: '',
      loginType: 'kuaishou',
      id: undefined,
      formEdit: this.$form.createForm(this),
      record: '',
      systemType: '不限',
      systemTypeName: '',
      queryParam: {
        projectId: '',
        userId: '',
      },
      projectId: '',
      user: '',
      tabListNoTitle: [
        {
          key: 'myProject',
          tab: '我管理的',
        },
        {
          key: 'participation',
          tab: '我参与的',
        },
      ],
      noTitleKey: 'participation',
      columns: participationColumns,
      columnsAccount: [
        {
          title: '账户id',
          align: 'center',
          dataIndex: 'accountId',
        },
        {
          title: '账户名称',
          align: 'center',
          dataIndex: 'authName',
        },
        {
          title: '所属人',
          align: 'center',
          dataIndex: 'userName',
        },
        {
          title: '授权时间',
          align: 'center',
          dataIndex: 'createTime',
          scopedSlots: {
            customRender: 'createTime',
          },
        },
      ],
      ipaginationAccount: {
        current: 1,
        pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        //   showSizeChanger: true,
        total: 0,
        onChange: (current) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipaginationAccount.current = current
        },
      },
      visibleMaterial:false,
      thisProjectId:null,
      selectedRowKeys:[],
      selectedRows: [],
      ipaginationMaterial: {
        current: 1,
        pageSize: 10,
        //   pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        //   showSizeChanger: true,
        total: 0,
        onChange: (current) => {
          // 切换分页时的回调，
          // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
          this.ipaginationMaterial.current = current
          
          this.getMaterialList()
        },
      },
      loadingMaterial: false,
      dataMaterial:[],
      columnsMaterial:[
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'projectName',
        },
        {
          title: '广告主名称',
          align: 'center',
          dataIndex: 'advertiserId_dictText',
        },
        {
          title: '产品名称',
          align: 'center',
          dataIndex: 'productId_dictText',
        },

        {
          title: '运营负责人',
          align: 'center',
          dataIndex: 'responsibleId_dictText',
        },
        {
          title: '设计负责人',
          align: 'center',
          dataIndex: 'designResponsibleId_dictText',
        },
      ],
      loadingAccount: false,
      projectVisible: false,
      columnsProject: [
        {
          title: '转让账户',
          align: 'center',
          dataIndex: 'accountId',
        },
        {
          title: '受让人姓名',
          align: 'center',
          dataIndex: 'assigneeName',
        },
        {
          title: '转户人姓名',
          align: 'center',
          dataIndex: 'transferorName',
        },

        {
          title: '受让人绩效开始时间',
          align: 'center',
          dataIndex: 'assigneeDate',
        },
        {
          title: '转户人绩效结束时间',
          align: 'center',
          dataIndex: 'transferorDate',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: {
            customRender: 'action',
          },
        },
      ],
      dataProject: [],
      dataAccount: [],
      dataSource: [],
      dataElse: [],
      loading: false,
      memberList: [],
      visibleAdd: false,
      member: [],
      itemJson: null,
      visibleBind: false,
      bindAccountLoginUrl: '/ctop/bindAccountLogin/login',
      bindAuthorizationUrl: '/ctop/bindAccountAuth/authorization',
      appId: [],
      list: [],
      options: [],
      visibleAccount: false,
      confirmLoading: false,
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  filters: {
    roleCode(value) {
      var state = {
        clip: '剪辑',
        shot: '拍摄',
        plan: '策划',
        plane: '平面',
        admin: '管理员',
        operator: '运营专员',
        kuaishouOperationManager: '快手运营经理',
        designTeamLeader: '设计组长',
        planeLeader: '平面组长',
        touTiaoOperationManager: '头条运营经理',
        operationAssistant: '运营助理',
      }

      if (value) {
        return state[value]
      } else {
        return '暂无'
      }
    },
    bidTypeData(sta) {
      var data = {
        null: '-',
        1: 'CPM',
        2: '点击数',
        6: 'OCPC',
        10: 'OCPM',
        12: "最大转化数"
      }
      return data[sta]
    },
    getDate(value) {
      let date = new Date(value)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? '0' + MM : MM
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + MM + '-' + d
    },
  },
  watch: {
    'ipagination.current': function (n, o) {
      console.log(n, o)
      if (this.noTitleKey == 'participation') {
        this.getParticipateList()
      } else {
        this.getResponsibleList()
      }
    },
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    changeData(data) {
      if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
        data.splice(
          data.findIndex((item) => item == 1),
          1
        )
      } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
        data.splice(0, data.length - 1)
      } else if (data.length == 0) {
        data.push(1)
      }
    },
    getFormFieldValue(field) {
      return this.formEdit.getFieldValue(field)
    },
    //   /ctop/userAllocation/getAccountsByProjectId    projectId  userId
	handleCostTimeChange(date, dateString) {
		console.log(dateString, 'dateString');
		this.dateValue = dateString;
	},
	disabledDate(current) {
		if (this.loginType == 'kuaishou') {
			return current && !(current > moment().subtract(7, 'days'));
		}
		else if (this.loginType == 'bytedance') {
			return false;
		}
		// TODO 时间限制格式
		// return current && !(current > moment().subtract(7, 'days'));
		// return current && !(current > (moment().subtract(7, 'days')) && current < moment());
		// return false;
	},
    projectLook(item) {
      var params = {}
      params.projectId = item.id
      params.status = 0
      getAction('/ctop/transferAccount/list', params).then((res) => {
        if (res.success) {
          this.projectVisible = true
          this.dataProject = res.result.map((item, index) => {
            return {
              ...item,
              key: index,
            }
          })
          this.ipaginationAccount.total = res.result.length
        }
      })
    },
    projectEdit(item, status) {
      var params = {}
      params.id = item.id
      params.status = status
      params.auditor = this.userInfo().id
      putAction('/ctop/transferAccount/edit', params).then((res) => {
        if (res.success) {
          this.projectVisible = false
          this.getResponsibleList()
        }
      })
    },
    handleOkProject() {},
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    add(value, key) {
      var dataValue = value.split(',')
      var dataKey = key.split(',')
      var jsonArr = []
      for (let i = 0; i < dataValue.length; i++) {
        jsonArr.push({
          userId: dataKey[i],
          userName: dataValue[i],
        })
      }
      this.member = jsonArr
    },
    log(id) {
      deleteAction('/ctop/projectMember/delete', {
        id: id,
      }).then((res) => {
        if (res.success) {
          this.getMemberList(this.projectId)
          this.$message.success('删除成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onTabChange(key, type) {
      this[type] = key
      this.keyWord = ''
      this.ipagination.current = 1
      if (key == 'myProject') {
        this.columns = myProjectColumns
        this.getResponsibleList()
      } else {
        this.columns = participationColumns
        this.getParticipateList()
      }
    },
    getResponsibleList() {
      //我管理的
      this.dataSource = []
      this.dataElse = []
      this.loading = true
      getAction('/ctop/project/responsibleListV2', {
        userId: this.userInfo().id,
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
        projectName: this.keyWord,
      }).then((res) => {
        if (res.code == 0) {
          this.loading = false
          this.dataSource = res.result.records
          this.dataElse = res.result.records
          this.ipagination.total = res.result.total
        }
      })
    },
    getParticipateList() {
      //我参与的
      this.dataSource = []
      this.dataElse = []
      this.loading = true
      getAction('/ctop/projectMember/participateListV2', {
        userId: this.userInfo().id,
        pageSize: this.ipagination.pageSize,
        pageNo: this.ipagination.current,
        projectName: this.keyWord,
      }).then((res) => {
        if (res.code == 0) {
          this.dataSource = res.result.records
          this.dataElse = res.result.records
          this.ipagination.total = res.result.total
          this.loading = false
        }
      })
    },
    getMemberList(projectId) {
      //成员查看
      this.memberList = []

      getAction('/ctop/projectMember/getMemberList', {
        projectId: projectId,
      }).then((res) => {
        if (res.code == 0) {
          this.visible = true
          this.memberList = res.result
        }
      })
    },
    handleOk(e) {
      this.postDataAction('/ctop/materialInfo/materialSync',{projectId:this.thisProjectId,toProjectIds:this.selectedRowKeys}).then(res=>{
        if(res.success){
          this.visibleMaterial = false
          this.thisProjectId = null
          this.selectedRowKeys = []
          this.keyWordMaterial = ''
          this.$message.success(res.message)
        }else{
          this.$message.error(res.message)
        }
      })
    },
    handleOkAdd(e) {
      var params = {}
      params.projectId = this.itemJson.id
      params.projectName = this.itemJson.projectName
      params.memberArr = this.appId
      this.confirmLoading = true
      httpAction('/ctop/projectMember/batchAdd', params, 'post').then((res) => {
        this.confirmLoading = false
        if (res.success) {
          this.visibleAdd = false
          this.appId = []
          this.$message.success('添加成功')
        } else {
          this.$message.error('添加失败')
        }
      })
    },
    getAllUserList(value) {
      getAction('/sys/user/getAllUserList', { pageSize: 50, pageNo: 1, userName: value }).then((res) => {
        if (res.success) {
          this.list = res.result.list
          this.options = res.result.list
        }
      })
    },
    addParams(item) {
      if (this.noTitleKey == 'myProject') {
        this.visibleAdd = true
        this.itemJson = item
        this.getAllUserList()
      } else {
        this.visibleAccount = true
        this.titleAccount = item.projectName
        this.loadingAccount = true
        getAction('/ctop/userAllocation/getAccountsByProjectId', {
          projectId: item.projectId,
          userId: this.userInfo().id,
        }).then((res) => {
          if (res.success) {
            this.dataAccount = res.result
            this.loadingAccount = false
            this.ipaginationAccount.total = res.result.length
          }
        })
      }
    },
    handleAdd() {},
    handleSync(item){
      this.dataMaterial = []
      this.visibleMaterial = true
      this.thisProjectId = item.id
      this.getMaterialList()
    },
    getMaterialListPageNo(){
      this.ipaginationMaterial.current = 1
      this.getMaterialList()
    },
    getMaterialList(){
      this.loadingMaterial = true
      getAction('/ctop/project/responsibleListV2', {
        userId: this.userInfo().id,
        pageSize: this.ipaginationMaterial.pageSize,
        pageNo: this.ipaginationMaterial.current,
        projectName: this.keyWordMaterial,
      }).then((res) => {
        this.loadingMaterial = false
        if (res.code == 0) {
          
          this.dataMaterial = res.result.records
          this.ipaginationMaterial.total = res.result.total
        }else{

        }
      })
    },
    handleEdit(item) {
      if (this.noTitleKey == 'myProject') {
        this.title = item.projectName
        this.projectId = item.id
        this.getMemberList(item.id)
      } else {
        this.mode = 'authorization'
        this.loginType = item.mediaId == '1' || item.mediaId == '3' ? 'bytedance' : 'kuaishou'
        this.record = item
        this.visibleBind = true
      }
    },
    handleDelete(id) {},
    onChageLogin(e) {
      if (this.mode == 'login') {
        this.loginType = 'pangolin'
      } else {
        this.loginType = 'kuaishou'

        this.systemType = '不限'
      }
    },
    handleCancel() {
      this.visibleBind = false
      this.formEdit.resetFields();
    },
    handleSubmit() {
      let params = {}
      params.advertiserId = this.record.advertiserId
      params.advertiser_name = this.record.advertiserName
      params.userId = this.userInfo().id
      params.userName = this.userInfo().realname
      params.projectId = this.record.projectId
      params.projectName = this.record.projectName
      params.systemType = this.systemType == '4' ? this.systemTypeName : this.systemType
	    params.authBeginTime = this.dateValue;
      
      // 触发表单验证
      this.formEdit.validateFields((err, values) => {
        if (!err) {
          params.materialType = values.materialType
          params.autoDelivery = values.autoDelivery
          if (this.mode == 'login') {
            params.accountName = this.accountName
            params.password = this.password
            params.loginType = this.loginType
            httpAction(this.bindAccountLoginUrl, params, 'post').then((res) => {
              if (res.success) {
                this.$message.success('绑定成功')
                this.accountName = ''
                this.password = ''
                this.loginType = 'kuaishou'
                this.visibleBind = false
              } else {
                this.$message.error(res.message)
              }
            })
          }
          // 授权登录
          if (this.mode == 'authorization') {
            params.authorizationType = this.loginType
            if (this.loginType == 'kuaishou') {
              params.mediaId = this.mediaId
              params.id = this.id
              params.dataSync = values.dataSync
            } else if (this.loginType == 'bytedance') {
              params.mediaId = 1
            }
            params.warningAmount = values.warningAmount
            params.warningProportion = values.warningProportion

            httpAction(this.bindAuthorizationUrl, params, 'post').then((res) => {
              if (res.success) {
                window.open(res.message, '_blank')
                this.visibleBind = false
                this.formEdit.resetFields();
              } else {
                alert('绑定失败')
              }
            })
          }
        }
      })
    },
    searchReset() {
      this.keyWord = ''
      this.ipagination.current = 1
      // this.dataSource = this.dataElse
      if (this.noTitleKey == 'participation') {
        this.getParticipateList()
      } else {
        this.getResponsibleList()
      }
    },
    searchQuery() {
      this.ipagination.current = 1
      if (this.noTitleKey == 'participation') {
        this.getParticipateList()
      } else {
        this.getResponsibleList()
      }

      // this.dataSource = this.dataElse.filter(item => {
      //   return item.projectName.toLowerCase().indexOf(this.keyWord.toLowerCase()) > -1
      // })
    },
    handleChange(value, options) {
      //   this.appId = value
    },
    getElseData(value) {
      this.getStatistics()
    },
    handleBlur() {},
    handleFocus() {},
    search(value) {
      this.options = []
      if (value != '') {
        // this.options = this.list.filter(item => {
        //   var data = item.realName + ' ' + item.roleName
        //   return data.toLowerCase().indexOf(value.toLowerCase()) > -1
        // })
        // this.options = [...this.options]
        this.getAllUserList(value)
      } else {
        this.getAllUserList()
      }
    },
    getauthConfigList() {
      getAction('/auth/oauthConfig/list', {
        status: 0,
        mediaId: 2,
      }).then((res) => {
        console.log(res)
        this.authConfigList = res.result
        if (res.result.length > 0) {
          this.id = res.result[0].id
        }
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getParticipateList()
      this.getauthConfigList()
    })
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>