<template>
  <el-form
    inline
    :model="form"
    ref="form"
    label-width="180px">
    <div class="dialog-info">
      <el-form-item
        verify
        prop="otaSourceIds"
        label="分销商"
        v-if="dialogType !== 'edit'"
      >
        <!-- <el-select
          filterable
          :disabled="dialogType === 'edit'"
          v-model="form.id">
          <el-option
            v-for="item in publicOtaOption"
            :key="item.id"
            :value="item.id"
            :label="item.publicotaSourceName"></el-option>
        </el-select> -->
        <el-select
          filterable
          multiple
          :disabled="dialogType === 'edit'"
          v-model="form.otaSourceIds">
          <el-option
            v-for="item in publicOtaOption"
            :key="item.id"
            :label="item.otaSourceName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        verify
        prop="otaSourceName"
        label="分销商名称"
        v-if="dialogType === 'edit'"
      >
        <el-input v-model="form.otaSourceName"></el-input>
      </el-form-item>
      <el-form-item
        verify
        prop="paymentType"
        label="预付类型">
        <el-select
          v-model="form.paymentType"
          :disabled="dialogType === 'edit'">
          <el-option
            label="预付款"
            :value="1"></el-option>
          <el-option
            label="挂账"
            :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="prePayment"
        label="支持余额支付">
        <el-switch
          :disabled="dialogType === 'edit'"
          v-model="form.prePayment"
          :active-value="1"
          :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item
        verify
        prop="paymentAmount"
        label="余额总数(￥)">
        <el-input-number
          :disabled="dialogType === 'edit'"
          :min="0"
          :step="0.01"
          :precision="2"
          v-model="form.paymentAmount"></el-input-number>
      </el-form-item>
      <el-form-item
        v-if="form.paymentType ===2"
        prop="prePaymentLimit"
        label="挂账额度(￥)"
      >
        <el-input-number
          :disabled="dialogType === 'edit'"
          :min="0"
          :step="0.01"
          :precision="2"
          v-model="form.prePaymentLimit"></el-input-number>
      </el-form-item>
      <el-form-item
        prop="is_use_settle_price"
        label="是否使用分销商结算价格">
        <el-switch
          v-model="form.is_use_settle_price"
          :active-value="1"
          :inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item
        v-if="form.ota_public_type === 2 || isShowForcecancel"
        prop="force_cancel"
        label="景区代理是否可强制取消订单">
        <el-switch
          v-model="form.force_cancel"
          :active-value="1"
          :inactive-value="0"></el-switch>
      </el-form-item>
      <div class="btnWrapper">
        <el-button
          @click="moreSetting=!moreSetting">更多操作</el-button><span>（用于给分销商创建后台登录账号，不需要可不填写）</span>
      </div>
      <div
        class="dialog-info"
        v-show="moreSetting">
        <el-form-item
          label="账号"
          prop="manager_name">
          <el-input v-model="form.manager_name"></el-input>
        </el-form-item>

        <el-form-item
          label="所属角色"
          prop="manager_roles">
          <el-select
            value-key="id"
            v-model="form.manager_roles"
            multiple
            disabled
            collapse-tags
            placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.id"
              :label="item.nickName"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="密码"
          prop="manager_password">
          <el-input
            v-model="form.manager_password"
            type="password"></el-input>
        </el-form-item>

        <el-form-item
          label="确认密码"
          prop="manager_checkPass">
          <el-input
            v-model="form.manager_checkPass"
            type="password"></el-input>
        </el-form-item>

        <el-form-item
          label="昵称"
          prop="manager_nickName">
          <el-input v-model="form.manager_nickName"></el-input>
        </el-form-item>

        <el-form-item
          can-be-empty
          :verify="verifyPhone"
          v-if="dialogType !== 'edit'"
          label="手机号"
          prop="manager_phone">
          <el-input v-model="form.manager_phone"></el-input>
        </el-form-item>

        <el-form-item
          label="旅行社"
          prop="agency_id">
          <el-select
            v-model="form.agency_id"
            placeholder="请选择">
            <el-option
              :value="-1"
              label="未绑定"></el-option>
            <el-option
              v-for="item in agencyList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div> -->
    </div>

    <div class="dialog-btn-wrap">
      <el-button
        @click="submit"
        type="primary">保存</el-button>
    </div>
  </el-form>
</template>

<script>
import { addOtaProject, bindOtaManager, updateOtaProject } from '@/api/ota'
import { verifyPhone } from '@/utils/validate'

export default {
  props: {
    existList: {
      type: Array,
      default: () => []
    },
    publicOtaList: {
      type: Array,
      default: () => []
    },
    roleList: {
      type: Array,
      default: () => []
    },
    otaItem: {
      type: Object,
      default: () => {}
    },
    dialogType: {
      type: String,
      default: ''
    }

  },
  data () {
    return {
      visible: false,
      needPassword: false,
      moreSetting: false,
      isShowForcecancel: false, // 新建是否显示强制取消开关
      form: {
        otaSourceIds: []
      }
    }
  },
  computed: {
    publicOtaOption () {
      return this.publicOtaList.filter(ota => !this.existList.find(i => i.otaSourceCode === ota.otaSourceCode))
    }
  },
  watch: {
  },
  methods: {
    verifyPhone,
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.form.scenics = []
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let target = this.existList.find(i => this.form.otaSourceIds.includes(i.otaSourceCode))
          if (target && this.dialogType === 'add') {
            this.$message.error('该分销商已存在，不可重复创建')
            return
          }
          if (this.dialogType === 'edit') { // 编辑分销商名称 用updateOtaProject接口 但仍要用bindOtaManager接口...
            updateOtaProject({...this.form})
          }
          if (this.dialogType === 'edit') {
            bindOtaManager(this.form).then(res => {
              this.$message.success('编辑成功')
              this.reset()
              this.handleClose()
              this.$emit('updateList')
            })
          } else {
            addOtaProject(this.form).then(res => {
              this.$message.success('添加成功')
              this.reset()
              this.handleClose()
              this.$emit('updateList')
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    convertTree (tree, list) {
      let newTree = JSON.parse(JSON.stringify(tree))
      let newList = JSON.parse(JSON.stringify(list))
      newTree.forEach(v => {
        newList.forEach((w, i) => {
          if (v.type === w.type) {
            v.options.push(w)
            newList = newList.filter(p => p.id !== w.id)
          }
        })
      })
      if (newList.length) {
        newTree.push(
          {
            label: '未分组',
            type: -1,
            options: newList
          }
        )
      }
      return newTree
    }
  }
}
</script>

<style lang="scss" scoped>
.btnWrapper{
  margin-left:50px;
  span{
    font-size: 12px;
  }
}

</style>
