<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增关联方' : '编辑关联方'" :form="form" :rules="rules" @submit="submit">
      <template v-slot:activeCompanyName>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>关联方名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.activeCompanyName" placeholder="请输入关联方名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
     <!-- <template v-slot:typeId>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >关联方类型：
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="form.typeId"
              placeholder="请选择关联方类型"
              style="width: 300px"
            >
              <el-option
                v-for="item in types"
                :value="item.id"
                :key="item.id"
                :label="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </template> -->
      <template v-slot:remark>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>




    </xy-dialog>


  </div>
</template>

<script>
import {store,show,save} from "@/api/activitycompany"
import { Message } from 'element-ui'
import { getparameter } from "@/api/system/dictionary";
export default {

  data() {
    return {
      isShow:false,
      type:'add',
      id:'',
      // types:[],
      form:{
        activeCompanyName:"",
        // typeId:"",
        remark:""
      },
      rules:{
        activeCompanyName:[
          {required:true,message:'请输入活动名称'}
        ],
        // typeId:[
        //   {required:true,message:'请选择关联方类型'}
        // ]
      }
    }
  },
  created(){
    // this.getLabels("activeCompanyType")
  },
  methods: {

    // async getLabels(number) {
    //   const res = await getparameter({
    //     number: number,
    //   });
    //     this.types = res?.detail;
    // },

    async getDetail(){
      const res = await show({id:this.id})
      this.form = {
        activeCompanyName:res.name,
        // typeId:res.type_id,
        remark:res.remark
      }
    },

    submit(){
      if(this.type === 'add'){
        store({
          name:this.form.activeCompanyName,
          // type_id:this.form.typeId,
          remark:this.form.remark
        }).then(res => {
          Message({
            type:'success',
            message:'新增活动关联方成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
        return
      }
      if(this.type === 'editor'){
        save({
          id:this.id,
          name:this.form.activeCompanyName,
          // type_id:this.form.typeId,
          remark:this.form.remark
        }).then(res => {
          Message({
            type:'success',
            message:'编辑活动关联方成功'
          })
          this.isShow = false
          this.$emit('refresh')
        })
      }
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        if(this.type === 'editor'){
          this.getDetail()
        }
      }else{
        this.id = ''
        this.type = ''
        this.$refs['dialog'].reset()
      }
    }
  }

}
</script>

<style scoped lang="scss">
.xy-table-item-label{
  width: 160px;
}
.img__delete{
  transform: scale(0.8,0.8);

  position: absolute;
  top: 4px;
  right: 4px;
}
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
::v-deep .el-upload--picture-card {
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 80px !important;
  height: 80px !important;
  line-height: 80px !important;
  text-align: center;
}
::v-deep .avatar {
  width: 80px !important;
  display: block;
  border-radius: 6px;
}

::v-deep .xy-table-item-label{
  width: 160px !important;
}

::v-deep .el-date-editor .el-range-separator{
  width: auto !important;
}

::v-deep .el-input-number .el-input__inner{
  text-align: left !important;
}
</style>
