<template>
  <div>
    <div class="padding-top-bottom">
      <div class="detail-panel">
        <div class="panel-header">
          <el-row>
            <el-col :span="12" class="title">
              条件信息
            </el-col>
            <el-col :span="12" class="right">
              <el-button class="tar" @click="save" :loading="saveLoading" :priv="`ImagePlayerManage.Edit.${ID}`">
                <i class="fa fa-save"></i>保存</el-button>
            </el-col>
          </el-row>
        </div>
        <el-form :model="tmpConditions" ref="infoForm" label-width="150px">
          <el-form-item label="内容类型：">
            <el-select v-model="tmpConditions.contentType" style="width:203px">
              <el-option v-for="item in contentTypeOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源栏目：">
            <catalog-select :value.sync="tmpConditions.fromCatalogID" type="Default" width="203" :contentType="tmpConditions.contentType"
              placeholder="请选择" @click-change="catalogSelectCallback">
            </catalog-select>
          </el-form-item>
          <el-form-item label="是否级联：">
            <el-switch v-model="tmpConditions.isCascade">
            </el-switch>
          </el-form-item>
          <conditionItem :dataInitURL="conditionInitURL" ref="conditions-item" :tmpCondition="tmpConditionDetail" :orderParams="{needOrder:true}">
          </conditionItem>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import conditionItem from '@src/components/contentComponent/conditionItem.vue'
import catalogSelectList from '../contentcore/catalogSelectList.vue'
import util from '@src/common/util.js'

export default {
  data() {
    return {
      conditionInitURL: [],
      tmpConditions: {},
      tmpConditionDetail: {},
      contentTypeOptions: [],
      saveLoading: false
    }
  },
  methods: {
    async init() {
      this.saveLoading = false
      const contentTypes = await axios.get('/ui/contentcore/contenttypes')

      this.contentTypeOptions = contentTypes.data.data

      const player = await axios.get('/ui/imageplayer/initcondition', {
        params: {
          ID: this.ID
        }
      })
      if (player.data.data.conditions) {
        this.tmpConditions = JSON.parse(player.data.data.conditions)
        this.tmpConditions.isCascade = this.tmpConditions.isCascade === 'Y'
      } else {
        this.tmpConditions = {
          fromCatalogID: '',
          contentType: 'Article',
          contentTypeName: '',
          isCascade: true,
          fromCatalogName: '',
          contentAttribute: 'image',
          condition: [[]],
          sortField: [[]],
          items: {}
        }
      }
      this.tmpConditionDetail = {
        column1: '',
        column1OperatorSelected: '',
        column1Operator: '',
        column1Value: '',
        column1ValueSelected: [],
        columnGroup2: '',
        column2: '',
        column2OperatorSelected: '',
        column2Operator: '',
        column2Value: '',
        column2ValueSelected: '',
        columnGroup3: '',
        column3: '',
        column3OperatorSelected: '',
        column3Operator: '',
        column3Value: '',
        column3ValueSelected: '',
        group: 'and',
        column4: '',
        column4OperatorSelected: '',
        column4Operator: '',
        column4Value: '',
        column4ValueSelected: '',
        columnGroup5: '',
        column5: '',
        column5OperatorSelected: '',
        column5Operator: '',
        column5Value: '',
        column5ValueSelected: '',
        columnGroup6: '',
        column6: '',
        column6OperatorSelected: '',
        column6Operator: '',
        column6Value: '',
        column6ValueSelected: '',
        orderColumnCount: 5,
        orderColumn1: 'ID',
        orderColumn1OrderType: '',
        orderColumn2: 'OrderFlag',
        orderColumn2OrderType: '',
        orderColumn3: 'PublishDate',
        orderColumn3OrderType: '',
        orderColumn4: 'TopFlag',
        orderColumn4OrderType: '',
        orderColumn5: 'BranchInnerCode',
        orderColumn5OrderType: ''
      }
      this.conditionInitURL = [
        '/ui/imageplayer/initconditiondetail',
        {
          params: {
            ID: this.ID,
            contentType: this.tmpConditions.contentType
          }
        }
      ]
    },
    async save() {
      if (
        this.tmpConditions.status === 'auditing' &&
          this.tmpConditions.status === 'passed' &&
          this.tmpConditions.status === 'published' &&
          this.tmpConditions.sisneedaudit
      ) {
        this.$alert('图片播放器不能修改！')
        return
      }
      this.saveLoading = true
      let conditions = {
        fromCatalogID: this.tmpConditions.fromCatalogID,
        contentType: this.tmpConditions.contentType,
        contentTypeName: this.tmpConditions.contentTypeName,
        isCascade: this.tmpConditions.isCascade ? 'Y' : 'N',
        fromCatalogName: this.tmpConditions.fromCatalogName,
        contentAttribute: this.tmpConditions.contentAttribute,
        condition: [[]],
        sortField: [[]],
        items: {}
      }
      await new Promise(resolve => {
        let condition1 = []
        let condition2 = []
        condition1.push({
          column: '',
          operator: '(',
          value: '',
          type: 'group'
        })
        for (let i = 1; i <= 3; i++) {
          if (
            this.tmpConditionDetail['column' + i] !== '' &&
              this.tmpConditionDetail['column' + i + 'OperatorSelected'] &&
              this.tmpConditionDetail['column' + i + 'ValueSelected'] &&
              this.tmpConditionDetail['column' + i + 'OperatorSelected'] !== '' &&
              this.tmpConditionDetail['column' + i + 'ValueSelected'] !== ''
          ) {
            if (this.tmpConditionDetail['columnGroup' + i] !== '' && condition1.length > 1) {
              condition1.push({
                column: '',
                operator: this.tmpConditionDetail['columnGroup' + i],
                value: '',
                type: 'columngroup'
              })
            }
            if (this.tmpConditionDetail['column' + i] === 'Attribute') {
              this.tmpConditionDetail['column' + i + 'ValueSelected'] = this.tmpConditionDetail['column' + i + 'ValueSelected'].join(',')
            }
            condition1.push({
              column: this.tmpConditionDetail['column' + i],
              operator: this.tmpConditionDetail['column' + i + 'OperatorSelected'],
              value: this.tmpConditionDetail['column' + i + 'ValueSelected'],
              type: 'column'
            })
          }
        }
        condition1.push({
          column: '',
          operator: ')',
          value: '',
          type: 'group'
        })
        condition2.push({
          column: '',
          operator: '(',
          value: '',
          type: 'group'
        })
        for (let i = 4; i <= 6; i++) {
          if (
            this.tmpConditionDetail['column' + i] !== '' &&
              this.tmpConditionDetail['column' + i + 'OperatorSelected'] &&
              this.tmpConditionDetail['column' + i + 'ValueSelected'] &&
              this.tmpConditionDetail['column' + i + 'OperatorSelected'] !== '' &&
              this.tmpConditionDetail['column' + i + 'ValueSelected'] !== ''
          ) {
            if (this.tmpConditionDetail['columnGroup' + i] !== '' && condition2.length > 1) {
              condition2.push({
                column: '',
                operator: this.tmpConditionDetail['columnGroup' + i],
                value: '',
                type: 'columngroup'
              })
            }
            if (this.tmpConditionDetail['column' + i] === 'Attribute') {
              this.tmpConditionDetail['column' + i + 'ValueSelected'] = this.tmpConditionDetail['column' + i + 'ValueSelected'].join(',')
            }
            condition2.push({
              column: this.tmpConditionDetail['column' + i],
              operator: this.tmpConditionDetail['column' + i + 'OperatorSelected'],
              value: this.tmpConditionDetail['column' + i + 'ValueSelected'],
              type: 'column'
            })
          }
        }
        condition2.push({
          column: '',
          operator: ')',
          value: '',
          type: 'group'
        })
        if (condition1.length > 2) {
          conditions.condition[0] = condition1
        }
        if (condition1.length > 2 && condition2.length > 2) {
          let row = {
            column: '',
            operator: this.tmpConditionDetail.group,
            value: '',
            type: 'group'
          }
          conditions.condition[0].push(row)
        }
        if (condition2.length > 2) {
          conditions.condition[0] = conditions.condition[0].concat(condition2)
        }
        for (let i = 1; i <= 3; i++) {
          if (this.tmpConditionDetail['orderColumn' + i] !== '' && this.tmpConditionDetail['orderColumn' + i + 'OrderType'] !== '') {
            conditions.sortField[0].push({
              column: this.tmpConditionDetail['orderColumn' + i],
              type: this.tmpConditionDetail['orderColumn' + i + 'OrderType']
            })
          }
        }
        resolve()
      })
      let saveCondition = await axios.put(`/ui/imageplayer/${this.ID}/savecondition`, { conditions })
      this.saveLoading = false
      util.showResponseMessage(saveCondition.data)
      if (saveCondition.data.status === 1) {
        this.init()
        this.$emit('callback', conditions)
      }
    },
    catalogSelectCallback(val) {
      this.tmpConditions.fromCatalogID = val.ID
      this.tmpConditions.fromCatalogName = val.name
    }
  },
  components: {
    'catalog-select': catalogSelectList,
    conditionItem
  },
  props: {
    ID: {
      required: true
    }
  }
}
</script>

<style scoped>
</style>
