edited

<template>
  <div class="add-new-money">
    <PageContentWrapper>
      <PageItemViewer :title="`特工任务/方案配置详情`">
        <el-form
          ref="ruleForm"
          :model="task"
          :rules="rules"
          label-position="right"
          label-width="140px"
          >
          <el-form-item
            prop="package_name"
            label="选择应用">
            <el-select
              :disabled="$route.query.isEdit === '1'"
              v-model="task.package_name"
              placeholder="请选择应用"
              >
              <el-option
                :label="item.value"
                :value="item.key"
                v-for="(item, i) in selectList.select_package_name"
                :key="`o${i}`"
                ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            prop="version"
            label="应用版本">
            <el-input
              type="textarea"
              :rows="6"
              maxlength="200"
              placeholder="请输入任务描述"
              v-model="task.version"
              class="wid400">
            </el-input>
            <span class="tips">不填表示全部，多个版本用空行(回车)隔开</span>
          </el-form-item>
          <el-form-item
            prop="channel"
            label="应用渠道">
            <el-input
              type="textarea"
              :rows="6"
              maxlength="200"
              placeholder="请输入任务描述"
              v-model="task.channel"
              class="wid400">
            </el-input>
            <span class="tips">不填表示全部，多个渠道用空行(回车)隔开</span>

          </el-form-item>
          <el-form-item
            prop="status"
            label="启用">
            <el-checkbox v-model="task.status">
            </el-checkbox>
          </el-form-item>
          <!-- 屏蔽品牌 -->
          <el-form-item label="屏蔽品牌" prop="brand.list" class="liscese_mk" ref="brand">
            <el-radio-group v-model="task.brand.type" @change="changeTab('brand')">
              <el-radio-button label="1">不限</el-radio-button>
              <el-radio-button label="2">选择品牌</el-radio-button>
            </el-radio-group>
            <div class="type_detail wid700" v-if="task.brand.type === '2'">
              <el-checkbox-group v-model="task.brand.list">
                <el-checkbox :label="item.id" v-for="item in selectList.deviceLogoList" :key="item.id">{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <!-- 屏蔽地域 -->
          <el-form-item label="屏蔽地域" prop="city.list" class="liscese_mk" ref="brand">
            <el-radio-group v-model="task.city.type" @change="changeCity('city')">
              <el-radio-button label="1">不限</el-radio-button>
              <el-radio-button label="2">选择地域</el-radio-button>
            </el-radio-group>
            <div class="type_detail wid700" v-if="task.city.type === '2'">
              <div class="area" >
                <el-cascader v-model="task.city.list" ref="cascaderAddr" :options="options" :props="{ multiple: true, checkStrictly: false }" clearable collapse-tags @change="handleChange"></el-cascader>
              </div>
            </div>
          </el-form-item>
          <!-- 屏蔽系统 -->
          <el-form-item label="屏蔽系统" prop="os.osListAndriod" class="liscese_mk" ref="brand">
            <el-radio-group v-model="task.os.type" @change="changeOS">
              <el-radio-button label="1">不限</el-radio-button>
              <el-radio-button label="2">选择选择系统</el-radio-button>
            </el-radio-group>
            <div class="type_detail wid700" v-if="task.os.type === '2'">
              <div class="os_type">
                <el-select v-model="task.os.osType" placeholder="请选择系统类型" class="width_limit150" @change="change_osType">
                  <el-option label="Android" value="android"></el-option>
                  <el-option label="小米" value="xiaomi"></el-option>
                </el-select>
              </div>
              <el-checkbox-group v-model="task.os.osListAndriod" v-if="task.os.osType === 'android'">
                <el-checkbox :label="item.id" v-for="(item,index) in selectList.deviceosListAndriod" :key="`android${index}`">{{item.name}}</el-checkbox>
              </el-checkbox-group>
              <el-checkbox-group v-model="task.os.osListMi" v-if="task.os.osType === 'xiaomi'">
                <el-checkbox :label="item.id" v-for="(item,index) in selectList.deviceosListXiaomi" :key="`mi${index}`">{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </el-form-item>
          <el-form-item
            label="选择特工任务："
            prop="open_config">
            <div class="searchBox">
              <el-select
                style="width:200px;margin-right:10px;margin-bottom:10px"
                v-model="queryForm.task_id"
                placeholder=""
                >
                <el-option label="全部产品" :value="0"></el-option>
                <el-option
                  :label="item.value"
                  :value="item.key"
                  v-for="(item, index) in selectList.select_task"
                  :key="`o${index}`"
                  ></el-option>
              </el-select>
              <el-input style="width:200px" placeholder="任务名称/产品名称" v-model="queryForm.keywords"></el-input>
              <br>
              <el-select
                style="width:200px;margin-right:10px"
                v-model="queryForm.task_type"
                placeholder=""
                >
                <el-option
                  :label="value"
                  :value="key"
                  v-for="(value,key) in selectList.task_type"
                  :key="`o${key}`"
                  ></el-option>
              </el-select>
              <el-button @click="fetchTask" type="primary">查询</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-table
              ref="table"
              :row-key="handleReserve"
              :reserve-selection="true"
              @selection-change="handleSelectionChange($event)"
              :data="tableForm.tableData"
              border
              :max-height="'540px'"
              >
              <el-table-column
                :reserve-selection="true"
                type="selection"
                width="55">
              </el-table-column>
              <el-table-column
                prop="task_name"
                label="任务名称"
                align="center">
                <template slot-scope="scope">
                  <div>
                    <el-button type="text" @click="toEdit(scope.row,'1')">{{scope.row.task_name}}</el-button>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="product_name"
                label="产品名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="taskprize"
                label="任务类型"
                align="center">
                <template slot-scope="scope">
                  <div>
                    {{selectList.task_type[scope.row.task_type]}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="priority"
                sortable
                label="优先级"
                align="center">
              </el-table-column>
            </el-table>
          </el-form-item>
          <!-- <div class="line_split"></div> -->
          <el-form-item>
            <el-button class="cancle" @click="cancle" size="small">取消</el-button>
            <el-button class="save" @click="submitData" type="primary" size="small">保存</el-button>
          </el-form-item>
        </el-form>
      </PageItemViewer>
    </PageContentWrapper>
  </div>
</template>
<script>
import rules from './config.js'
import Api from '../../../api/specialTask/scheme'
import ruleData from './ruleData'
import { cityData, cityJson } from './cityData'
import { unique } from '../../../utils/common'
let flatten = arr => arr.reduce((begin, current) => {
  Array.isArray(current) ? begin.push(...flatten(current)) : begin.push(current)
  return begin
}, [])
export default {
  name: 'AddTask',
  data() {
    return {
      'gametype': [],
      // 城市选择器
      'options': cityData,
      'selectList': {
        'deviceLogoList': ruleData.deviceLogoList,
        'deviceosListAndriod': ruleData.deviceosListAndriod,
        'deviceosListXiaomi': ruleData.deviceosListXiaomi,
        'select_task': [],
        'select_package_name': [],
        'task_type': {
          0: '全部任务类型',
          1: '普通任务',
          2: '游戏任务' ,
          3: '软件注册',
          4: '开卡消费',
        },
        'bussiness_type': {
          0: '全部业务类型',
          1: '一次性任务',
          2: '每日任务' ,
        },
      },
      // 任务列表查询项
      'queryForm': {
        status: 0,
        task_type: '0',
        task_id: 0,
        business_type: 0,
        keywords: '',
        page_num: 1,
        page_size: 50
      },
      // 任务列表数据
      'tableForm': {
        task_ids: [],
        tableData: []
      },
      'task': {
        package_name: '',
        version: '',
        channel: '',
        status: false,
        task_ids: [],
        brand: {
          type: '1',
          list: []
        },
        city: {
          type: '1',
          list: [],
          flist: {}
        },
        os: {
          type: '1',
          osType: 'android',
          osListAndriod: [],
          osListMi: []
        }
      },
      'onlineConfigData': [],
      'rules': {
        'package_name': [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        'brand.list': [{
          required: true,
          validator: (rule, value, cb) => {
            if (this.task.brand.type !== '1') {
              if (!this.task.brand.list.length) {
                cb(new Error('请选择'))
              } else {
                cb()
              }
            } else {
              cb()
            }
          },
          trigger: 'change'
        }],
        'city.list': [{
          required: true,
          validator: (rule, value, cb) => {
            if (this.task.city.type !== '1') {
              if (!this.task.city.list.length) {
                cb(new Error('请选择'))
              } else {
                cb()
              }
            } else {
              cb()
            }
          },
          trigger: 'change'
        }],
        'os.osListAndriod': [{
          required: true,
          validator: (rule, value, cb) => {
            if (this.task.os.type !== '1') {
              if (this.task.os.osListAndriod.length + this.task.os.osListMi.length < 1) {
                cb(new Error('请选择'))
              } else {
                cb()
              }
            } else {
              cb()
            }
          },
          trigger: 'change'
        }],
      },
      'configRules': rules.config
    }
  },
  created() {
    this.fetchTask().then(()=>{
      this.init()
    })
  },
  methods: {
    handleReserve(row) {
      return row.task_id
    },
    // 排序
    tableSortChange(cell, ev) {
      const { prop, order } = cell
      const params = {}
      if (order) {
        this.queryForm.sort_type = order === 'ascending' ? 1 : 'desc'
        this.queryForm.sort  = prop
      }
      this.fetchTask()
    },
    submitData() {
      if (!this.tableForm.task_ids.length) {
        return this.$message.warning('请选择任务id')
      }
      this.$refs.ruleForm.validate(async (v) => {
        if (!v) return false
        let task_names = []
        this.tableForm.task_ids.forEach(t=>{
          this.tableForm.tableData.forEach(q => {
            if (t === q.task_id) {
              task_names.push(q.task_name)
            }
          })
        })
        let data = {
          status: this.task.status ? 1 : -1,
          package_name: this.task.package_name,
          version: this.task.version,
          channel: this.task.channel,
          black_brand: this.task.brand.list,
          task_ids: this.tableForm.task_ids.join(','),
          task_names: task_names.join(','),
          black_area: { ...this.task.city.flist },
          black_os: {
            Android: this.task.os.osListAndriod,
            Xiaomi: this.task.os.osListMi
          }
        }
        if (!data.black_os.Android.length) {
          delete data.black_os.Android
        }
        if (!data.black_os.Xiaomi.length) {
          delete data.black_os.Xiaomi
        }
        this.$route.query.id ? data.plan_id = this.$route.query.id :  data.plan_id = ''
        let res = await Api.submit(JSON.stringify(data))
        this.$message.success('操作成功')
        this.$router.push({ path: '/specialTask/schemeList' })
      })
    },
    cancle() {
      this.$router.push({ path: '/specialTask/schemeList' })
    },
    // 选择表格项
    handleSelectionChange(val) {
      let ids = []
      val.forEach(v =>{
        ids.push(v.task_id)
      })
      // this.tableForm.task_ids = unique(this.tableForm.task_ids.concat(ids))
      this.tableForm.task_ids = ids
    },
    changeTab(type) {
      this.task[type].list = []
      this.$refs.ruleForm.validate()
    },
    change_osType(val) {
      this.task.os.osListAndriod = []
      this.task.os.osListMi = []
    },
    changeCity() {
      this.task.city.list = []
      this.task.city.flist = {}
      this.task.city.saveCity = []
      console.log(this.task.city)
    },
    changeOS() {
      this.task.os.osListAndriod = []
      this.task.os.osListMi = []
      this.task.os.osType = 'android'
      this.$refs.ruleForm.validate()
    },
    handleChange(value) {
      let saveValue = value
      let isProvince = /^[1-9][1-9]([0]{4})$/
      let len = saveValue ? saveValue.length : 0
      let areaArr = JSON.parse(JSON.stringify(value))
      let provinceArr = []
      let cityArr = []
      if (len > 0) {
        // for (let i = 0; i < len; i++) {
        //   if (areaArr[i].length > 1) {
        //     areaArr[i].splice(0, 1)
        //   }
        // }
        let flattenArr = flatten(areaArr)
        let newArr = Array.from(new Set(flattenArr))
        for (let i = 0; i < newArr.length; i++) {
          isProvince.test(parseInt(newArr[i], 10)) ?
            provinceArr.push(cityJson[newArr[i]]) :
            cityArr.push(cityJson[newArr[i]])
        }
        this.task.city.flist = {
          saveCity: saveValue,
          city: cityArr,
          province: provinceArr
        }
      } else {
        this.task.city.flist = {
          city: [],
          province: []
        }
      }
    },
    async fetchTask() {
      let data = {
        ...this.queryForm,
        status: 1,
        page_num: 1,
        page_size: 1000,
      }
      const res = await Api.fetchTask(data)
      this.isLoading = false
      this.selectList.select_package_name = res.ext.select_package_name
      let obj = {}
      res.ext.select_package_name.forEach(t=>{
        obj[t.key] = t.value
      })

      this.selectList.select_package_name_obj = obj

      this.tableForm.tableData = res.list
      // this.tableForm.tableData.forEach(t => {
      //   this.tableForm.task_ids.forEach(v=> {
      //     if (t.task_id === v) {
      //       this.$refs.table.toggleRowSelection(t,true)
      //     }
      //   })
      // })

    },
    toEdit(row, type) {
      if (!this.checkPermission('159')) {
        this.$message.warning('没有该权限')
        return
      }
      this.$router.push({
        path: '/specialTask/editSpecialTask',
        query: {
          isEdit: `${type}`,
          id: `${row.task_id}`,
        }
      })
    },
    // 屏蔽品牌
    async init() {
      if (this.$route.query.id) {
        const res = await Api.detail({ plan_id: this.$route.query.id })
        this.selectList.select_task = res.ext.select_task
        console.log(res)
        let os = {
          android: [],
          xiaomi: []
        }
        let osLength = 0
        Object.keys(res.detail.black_os).forEach(v => {
          osLength = osLength + res.detail.black_os[v].length
        })
        // <el-option label="Android" value="android"></el-option>
        //           <el-option label="小米" value="xiaomi"></el-option>
        this.task = {
          package_name: res.detail.package_name,
          version: res.detail.version,
          channel: res.detail.channel,
          // eslint-disable-next-line no-unneeded-ternary
          status: res.detail.status === 1 ? true : false,
          brand: {
            type: res.detail.black_brand.length ? '2' : '1',
            list: res.detail.black_brand
          },
          city: {
            type: res.detail.black_area.saveCity && res.detail.black_area.saveCity.length ? '2' : '1',
            list: res.detail.black_area.saveCity || [],
            flist: {}
          },
          os: {
            type: osLength > 0 ? '2' : '1',
            osType: res.detail.black_os['Android'] && res.detail.black_os['Android'].length ? 'android' : 'xiaomi',
            osListAndriod: res.detail.black_os['Android'] ? res.detail.black_os['Android'] : [],
            osListMi: res.detail.black_os['Xiaomi'] ? res.detail.black_os['Xiaomi'] : [],
          }
        }
        this.handleChange(res.detail.black_area.saveCity || [])
        let ids = res.detail.task_ids.split(',')
        let tableData = []
        ids.forEach(t => {
          this.tableForm.tableData.forEach(v => {
            if (t === `${v.task_id}`) {
              tableData.push(v)
            }
          })
        })
        this.tableForm.tableData = tableData
        this.tableForm.tableData.forEach(t => {
          this.$refs.table.toggleAllSelection()
        })
      } else {
        const res = await Api.detail({ plan_id: '' })
        this.selectList.select_task = res.ext.select_task
      }
    },
    async createChannelid() {
      if (this.task.channelid) {
        try {
          let confirm = await this.$confirm('确定重新生成渠道id吗?', '提示', { type: 'warning' })
          if (confirm) {
            this.fetchCreateChannelid()
          }
        } catch (error) {
        }
      } else {
        this.fetchCreateChannelid()
      }
    },
  }
}
</script>
<style lang="scss">
$font-weak: #C0C4CC;
.searchBox {
    display: inline-block;
  width: 800px;
  border: 0.5px solid #dcdfe6;
  padding: 10px;
  margin-top: 10px;
}
.liscese_mk {
    .el-form-item__label {
      &:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
.add-new-money {
    textarea::-webkit-input-placeholder {
        color: $font-weak;
    }
    textarea:-ms-input-placeholder {
        color: $font-weak;
    }
    textarea:-moz-placeholder {
        color: $font-weak;
    }
    textarea::-moz-placeholder {
        color: $font-weak;
    }
  .ml-50{
     margin-left: 50px;
    }
  .wid140 {
    width: 140px;
  }
  .wid150 {
    width: 150px;
  }
  .wid400 {
    width: 400px;
  }
  .wid200 {
    width: 200px;
  }
  .wid350 {
    width: 350px;
  }
  .line_split {
    height: 1px;
    margin: 0 0 20px 60px;
    background-color: #DCDFE6;
  }
}
.type_detail {
    width: 260px;
    padding: 10px 0 10px 20px;
    margin-top: 10px;
    background: #f6f6f6;
    box-sizing: border-box;
    .el-checkbox {
      vertical-align: top;
    }
    &.wid300 {
      width: 300px;
    }
    &.wid700 {
      width: 700px;
    }
    &.wid450 {
      width: 450px;
    }
    &.wid400 {
      width: 400px;
    }
  }
  .tips {
    font-size: 12px;
    margin-left: 30px;
    color: #909399
  }
</style>