<template>
<div>
  <el-button :disabled="data.status !== '新建'" type="primary" size="mini" @click="onShow()">编 辑</el-button>
  <el-drawer
    title="编辑"
    :visible.sync="drawer"
    direction="rtl"
    append-to-body
    size="900px">
    <div class="drawer__panel">
      <el-row :gutter="20">
        <el-form ref="form" :model="form" :rules="rules" :status-icon="false" label-width="80px" size="small">
          <el-col :span="8">
            <el-form-item label="结算企业" prop="sys_enterpriseid">
              <enterpriseTemp ref="ent" @rowClick="rowClick"></enterpriseTemp>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="居间合同" prop="sa_contractid">
              <contractTemp ref="con" :id="form.sys_enterpriseid" @rowContractClick="rowContractClick"></contractTemp>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单信息" prop="ownerid">
              <orderTemp ref="order" :id="form.sa_contractid" @orderRowClick="orderRowClick"></orderTemp>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单据日期">
              <el-date-picker
                style="width:100%"
                v-model="form.billdate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算方式" prop="settlementmode">
              <el-select style="width:100%" v-model="form.settlementmode" placeholder="请选择结算方式">
                <el-option label="线上" value="线上"></el-option>
                <el-option label="线下" value="线下"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :autosize="{minRows:4}" placeholder="请输入备注"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <div class="fixed__btn__panel">
      <el-button class="normal-btn-width" type="primary" size="small" @click="submitForm">创 建</el-button>
      <el-button class="normal-btn-width" size="small" @click="resetForm">重 置</el-button>
    </div>
  </el-drawer>
</div>
</template>

<script>
import enterpriseTemp from '@/template/enterprise/index.vue'
import contractTemp from '@/template/rebateCanUseContract/index.vue'
import orderTemp from '@/template/rebateCanUseOrder/index.vue'

export default {
  props:['data'],
  data() {
    var checkSacontractid = (rule, value, callback) => {
      if (!this.form.sys_enterpriseid) {
        return callback(new Error('请先选择结算企业'));
      }
      if (!value) {
        return callback(new Error('请选择居间合同'));
      }
      callback();
    };
    var checkSaorderid = (rule, value, callback) => {
      if (!this.form.sa_contractid) {
        return callback(new Error('请先选择居间合同'));
      }
      console.log(value)
      if (!value) {
        return callback(new Error('请选择订单'));
      }
      callback();
    };
    return {
      form: {
        "sa_rebatesettlementid": 0,
        "sys_enterpriseid": "", //结算企业档案ID
        "ownertable": "sa_order", //数据表
        "ownerid": "", //数据id
        "billdate": (new Date()).toISOString().split('T')[0], //结算日期
        "remarks": "",
        "sa_contractid": "", //居间合同ID
        "settlementmode": "线上" //结算方式，线下、在线（在线时生成收入凭证）
      },
      rules:{
        sys_enterpriseid: [
          { required: true, message: '请选择结算企业', trigger: 'change' },
        ],
        sa_contractid:[
          { validator: checkSacontractid, trigger: 'blur' }
        ],
        ownerid:[
          { validator: checkSaorderid, trigger: 'blur' }
        ],
        settlementmode:[
          { required: true, message: '请选择结算方式', trigger: 'blur' },
        ]
      },
      drawer:false
    }
  },
  components:{
    enterpriseTemp,
    contractTemp,
    orderTemp
  },
  methods: {
    onShow () {
      this.drawer = true
      this.form = Object.assign({},this.form,this.data)
      setTimeout(() => {
        this.$refs.ent.form.enterprisename = this.data.enterprisename
        this.$refs.con.form.title = this.data.billno_contract
        this.$refs.order.form.sonum = this.data.sonum
      }, 500);
      
    },
    async submitForm() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false;
      });
      const res = await this.$api.requested({"id": "20230104180102","content":this.form})
      this.tool.showMessage(res,()=>{
        this.drawer = false
        this.$emit('onSuccess')
      })
    },
    rowClick (row) {
      this.form.sys_enterpriseid = row.sys_enterpriseid
      this.$refs.con.form.title = this.$refs.order.form.sonum = ''
      this.form.sa_contractid = this.form.ownerid = ''
      this.$refs['form'].validate((valid) => {
        if (!valid) return false;
      });
    },
    rowContractClick (row) {
      this.form.sa_contractid = row.sa_contractid
      this.$refs['form'].validate((valid) => {
        if (!valid) return false;
      });
    },
    orderRowClick (row) {
      this.form.ownerid = row.sa_orderid
      this.$refs['form'].validate((valid) => {
        if (!valid) return false;
      });
    },
    resetForm () {
      this.$refs.ent.form = this.$refs.con.form = this.$refs.order.form = {}
    }
  }
}
</script>