<template>
  <!-- 意见反馈页面子组件(单笔资产反馈信息) -->
  <div>
    <template v-for="(form,index) in list">
      <el-card v-if="form.isShow || !isBatch" :key="index" class="box-column-margin-bottom" style="position:relative;z-index:1">
        <i v-if="list2.length > 1" class="el-icon-error del-feedback" @click="delForm(index)"></i>
        <div class="flex-spaceB">
          <el-form ref="form" :model="form" class="column-left" :rules="listRules" style="width:100%" label-width="130px">
            <!-- 付款确认书编号 -->
            <el-form-item :label="$t('feedBackMain.assetCode')" prop="assetCode" style="width:60%">
              <el-select v-if="isBatch" filterable v-model="form.assetCode" :placeholder="$t('feedBackMain.assetCodePrompt')" @change="e => calcDisabled(e,index)">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :disabled="item.disabled"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
              <el-input v-else disabled v-model="form.assetCode"></el-input>
            </el-form-item>
            <!-- 是否通过 -->
            <el-form-item :label="$t('feedBackMain.passFlag')">
              <el-radio-group v-model="form.passFlag">
                <el-radio label="2">{{$t('common.yes')}}</el-radio>
                <el-radio label="1">{{$t('common.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-collapse-transition>
              <div v-if="form.passFlag === '1'">
                <!-- 反馈意见 -->
                <div class="flex-spaceB" v-for="(feedback,index2) in form.sampleFeedBackDetailDtos" :key="index2">
                  <el-form-item :label="`${$t('feedBackMain.feedbackSuggestion') + (index2+1)}`" style="width:calc(100% - 62px)">
                    <el-input maxlength="500" v-model.trim="feedback.feedbackQuestionContent" :placeholder="$t('feedBackMain.placeholder')"></el-input>
                  </el-form-item>
                  <div class="flex-left" style="width:62px">
                    <!-- 新添反馈意见 -->
                    <div class="flex-center" v-if="form.sampleFeedBackDetailDtos.length > 1">
                      <i class="el-icon-error cancel-question" @click="delFeedback(index,index2)"></i>
                    </div>
                    <!-- 新添反馈意见 -->
                    <div class="flex-center" v-if="index2 === form.sampleFeedBackDetailDtos.length - 1">
                      <i class="el-icon-circle-plus add-question" @click="addFeedback(index)"></i>
                    </div>
                  </div>
                </div>
                <div v-if="feedbackType === '1'">
                  <!-- 不建议入池 -->
                  <el-form-item :label="$t('feedBackMain.enterPoolStatus')">
                    <el-radio-group v-model="form.enterPoolStatus">
                      <el-radio label="2">{{$t('common.yes')}}</el-radio>
                    <el-radio label="1">{{$t('common.no')}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <!-- 退单是否需要补抽 -->
                  <el-collapse-transition>
                    <el-form-item v-if="form.enterPoolStatus === '2'" :label="$t('feedBackMain.supplementPumpStatus')">
                      <el-radio-group v-model="form.supplementPumpStatus">
                        <el-radio label="2">{{$t('common.yes')}}</el-radio>
                    <el-radio label="1">{{$t('common.no')}}</el-radio>
                        <el-radio label="3">{{$t('feedBackMain.noConfirm')}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-collapse-transition>
                </div>
              </div>
            </el-collapse-transition>
            <!-- 反馈下一笔 -->
            <!-- {{index}}{{list.length - 1}}{{list2.length - 1}}{{index === list.length - 1}} -->
            <el-collapse-transition>
              <div align="center" v-if="form.assetCode === list2[list2.length - 1].assetCode && isBatch && list2.length < options.length">
                  <auth-button size="medium" :classType="true" :label="$t('feedBackMain.feedbackNext')" type="primary" @click="addForm(index)"></auth-button>
              </div>
            </el-collapse-transition>
          </el-form>
        </div>
      </el-card>
    </template>
  </div>
</template>

<script>
import {
  authButton
} from 'newepoch-components'
import feedBackMain from '@/api/assetoutfeedback/feedBackMain/feedBackMain.js'

export default {
  name: 'feedBackContentSub',
  components: {
    authButton
  },
  props: {
    // 反馈类型：0 抽样；1 确权；3 其他
    feedbackType: {
      type: [String, Number],
      default: '1'
    },
    // 是否批量
    isBatch: {
      type: [Boolean],
      default () {
        return false
      }
    },
    // 参数
    queryParas: {
      type: [Object],
      default () {
        return {}
      }
    },
    // 列表
    datas: {
      type: [Array],
      default () {
        return {}
      }
    }
  },
  computed: {
    list: {
      get: function () {
        return this.datas
      },
      set: function (value) {
        this.$emit('update:datas', value)
      }
    },
    list2 () {
      return this.list.filter(item => { return item.isShow })
    }
  },
  data () {
    return {
      // 反馈列表
      // list: [],
      // 付款确认书列表
      options: [],
      currentlist: [],
      // 表单列表
      // 默认表单
      defaultForm: {
        'assetCode': '',
        'feedbackFrequency': this.queryParas.feedbackFrequency ? this.queryParas.feedbackFrequency.toString() : '1',
        'passFlag': '1',
        'supplementPumpStatus': '2',
        'isShow': true,
        'enterPoolStatus': '1',
        'sampleFeedBackDetailDtos': [
          {
            feedbackQuestionContent: ''
          },
          {
            feedbackQuestionContent: ''
          },
          {
            feedbackQuestionContent: ''
          }
        ]
      },
      // 校验规则
      listRules: {
        // 付款确认书编号
        assetCode: [
          {
            required: true,
            message: this.$t('feedBackMain.assetCodePrompt'),
            trigger: 'change'
          },
          {
            required: true,
            message: this.$t('feedBackMain.assetCodePrompt'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  watch: {
    // 监听表单
    'queryParas.auditFileType' (newVal) {
      this.getList()
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      let newVal = this.queryParas
      // 获取批量暂存
      if (this.isBatch) {
        if (!newVal.auditFileType && this.feedbackType !== '1') {
          this.$nextTick(() => {
            this.warning(this.$t('feedBackMain.checkAuditFileType'))
          })
          return false
        }
        feedBackMain.spbatch.getList(newVal).then(res => {
          if (res.success && res.data) {
            if (res.data.length > 0) {
              // 映射付款确认书编号下拉列表
              this.options = res.data.map(item => {
                return {
                  label: item.assetCode,
                  id: item.assetCode,
                  disabled: true
                }
              })
              // 映射反馈列表
              let list = res.data.map(item => {
                // 若没有反馈意见
                if (!item.sampleFeedBackDetailDtos || item.sampleFeedBackDetailDtos.length < 1) {
                  item.sampleFeedBackDetailDtos = [{
                    feedbackQuestionContent: ''
                  },
                  {
                    feedbackQuestionContent: ''
                  },
                  {
                    feedbackQuestionContent: ''
                  }]
                }
                // 若没有通过状态
                if (!item.passFlag || item.passFlag === '0') {
                  item.passFlag = '1'
                }
                // 若没有不建议入池状态
                if (!item.enterPoolStatus) {
                  item.enterPoolStatus = '1'
                }
                // 若没有退单是否需要补抽状态
                if (!item.supplementPumpStatus) {
                  item.supplementPumpStatus = '2'
                }
                item.currentCode = item.assetCode
                item.isShow = true
                // item.isShow = newVal.feedbackFrequency === '' ? true : item.feedbackFrequency === newVal.feedbackFrequency.toString()
                return item
              })
              this.list = list
              this.currentlist = this.UtilJs.cloneDeep(list)
            } else {
              // if (this.list.length < 1) {
              //   this.list.push(this.UtilJs.cloneDeep(this.defaultForm))
              // }
              this.warning(this.$t('feedBackMain.noData'))
            }
          }
        })
      }
    },
    // 映射付款确认书编号下拉列表
    calcDisabled (e, index) {
      // let self = {}
      // 将原本有的资产变为禁用
      if (this.list[index].currentCode) {
        for (let t in this.options) {
          if (this.options[t].id === this.list[index].currentCode) {
            this.options[t].disabled = false
            break
          }
        }
      }
      for (let i in this.currentlist) {
        let item = this.currentlist[i]
        if (e === item.assetCode) {
          // 将选中的资产变为可用
          for (let t in this.options) {
            if (this.options[t].id === item.assetCode) {
              this.options[t].disabled = true
              break
            }
          }
          let chooseItem = this.UtilJs.cloneDeep(item)
          chooseItem.isShow = true
          this.$set(this.list, index, chooseItem)
          // // this.list[index] = chooseItem
          // // item = self
          // this.$set(this.list, i, self)
          // console.log(index, i)
          break
        }
      }
    },
    // 新增表单卡片
    addForm () {
      // 新增默认表单
      // for (let index in this.currentlist) {
      //   let item = this.currentlist[index]
      //   for (let index2 in this.list) {
      //     let item2 = this.list[index2]
      //     console.log(item.assetCode, item2.assetCode)
      //     if (item.assetCode !== item2.assetCode) {
      //       this.list.push(this.UtilJs.cloneDeep(item))
      //     }
      //   }
      // }
      let currentlist = this.UtilJs.cloneDeep(this.currentlist)
      let list = this.UtilJs.cloneDeep(this.list)
      for (var i = 0; i < list.length; i++) {
        for (var j = 0; j < currentlist.length; j++) {
          if (currentlist[j].assetCode === list[i].assetCode) {
            currentlist.splice(j, 1)
            j = j - 1
          }
        }
      }
      let currentCode = currentlist[0].assetCode
      this.list.push(currentlist[0])
      for (let i in this.options) {
        let item = this.options[i]
        if (item.id === currentCode) {
          this.options[i].disabled = true
          return false
        }
      }
      // 表格滚动至底
      this.$nextTick(() => {
        let container = this.$el.offsetParent.querySelector('.el-dialog__body')
        container.scrollTop = container.scrollHeight
      })
    },
    // 删除表单卡片,index:表单卡片索引值
    delForm (index) {
      // this.calcDisabled()
      for (let i in this.options) {
        let item = this.options[i]
        if (item.id === this.list[index].assetCode) {
          this.options[i].disabled = false
          break
        }
      }
      this.list.splice(index, 1)
    },
    // 新增意见反馈,index:表单卡片索引值
    addFeedback (index) {
      this.list[index].sampleFeedBackDetailDtos.push({
        feedbackQuestionContent: ''
      })
    },
    // 删除意见反馈,index:表单卡片索引值；index2：意见反馈索引值
    delFeedback (index, index2) {
      this.list[index].sampleFeedBackDetailDtos.splice(index2, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '~@/styles/assetoutfeedback/common.scss'
</style>
