<template>
  <div class="page-body">

    <vxe-form :data="formOptions.data" ref="xForm" :title-width="formOptions.titleWidth"
      :title-align="formOptions.titleAlign" :rules="formOptions.rules" :items="formOptions.items" titleColon>
      <template #auth_stop_date="{}">
        <a-date-picker placeholder="请选择日期" style="width:100%;"  v-model="auth_stop_date" />
      </template>
      

      <template #company_type="{data}">
        <a-select :default-value="companyTypeData[0]" v-model="data.company_type" style="width: 100%" >
          <a-select-option v-for="companyType in companyTypeData" :key="companyType">
            {{ companyType }}
          </a-select-option>
        </a-select>
      </template>
    </vxe-form>


    <div class="footerbar-bottom"> 
      <a-button type="primary" @click="ok">确定</a-button>
      <a-button @click="cancel">取消</a-button>
    </div>

  </div>
</template>

<script> 
import BASE_URL from '@/services/base/api.js';

export default {
  name: 'BaseAgentEdit',

  props: {
    pageMode: {
      type: String,
      default: "edit"
    },
    dataId: {
    }

  },

  data() {

    // 页面数据变量
    var pageData = {

      companyTypeData : ['普通', '星级','特星级'],
      actions: {
        create: `${BASE_URL.BASE_URL}/BaseAgent/v1/create`,
        update: `${BASE_URL.BASE_URL}/BaseAgent/v1/update`,
        get: `${BASE_URL.BASE_URL}/BaseAgent/v1/detail`
      },

      auth_stop_date:'2030-01-01',

      formOptions: {
        data: { 
          "title": "",
          "short_name": "",
          "logo": "",
          "desc": "",
          "company_type": "普通",
          "auth_stop_date": new Date("2080-01-01").getTime() /1000,
          "status": 1,
          "token": ""
        },

        titleWidth: 100,
        titleAlign: 'right',

        rules: {
          title: [
            { required: true, message: '请输入名称' }
          ], 
          
        },

        items: [
          {
            title: '左侧',
            children: [
              { field: 'title', title: '代理商名称', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商名称' } } },
              { field: 'short_name', title: '代理商简写', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入代理商简写' } } },
              { title: '代理商类型', span: 24, slots: { default: 'company_type' }      }, 
              
              { title: '截止时间', span: 24, slots: { default: 'auth_stop_date' } },
              { field: 'desc', title: '描述', span: 24, itemRender: { name: '$input', props: { placeholder: '请输入描述' } } },
            
            ]
          }
        ]
      }

    };

    pageData.formOptions = Object.assign({},this.$mk.config.defaults.formOptions, pageData.formOptions);

    return pageData;
  },
  created() {
    if (this.dataId) {
      this.$mk.post({
        url: this.actions.get,
        loading: "加载中...",
        data: {
          id: this.dataId
        }
      }).then(a => {
        this.formOptions.data = a.data.BaseAgent;

        if(this.formOptions.data.auth_stop_date){
          var d = new Date(this.formOptions.data.auth_stop_date * 1000);
          this.auth_stop_date = d.getFullYear() +"-"+(d.getMonth()+1) +"-"+d.getDate()  ;
        }
      }).catch((a) => {
        this.$mk.error(a.data.msg);
      });
    }

  },
  // 函数
  methods: {


    loadData() {
    },

    ok() {

      let save = () => {
        let action = this.pageMode == "add" ? this.actions.create : this.actions.update;
        let postdata = this.pageMode == "add" ? Object.assign({ id: this.dataId }, this.formOptions.data) : Object.assign({}, this.formOptions.data);
        if(this.auth_stop_date){
          postdata.auth_stop_date = parseInt(new Date(this.auth_stop_date).getTime()/1000);
        }
    
        this.$mk.post({
          url: action,
          loading: "保存中...",
          data: postdata
        }).then(() => {
          this.$mk.success("保存成功");
          this.$emit("callback", { success: true });
        }).catch((a) => {
          this.$mk.error(a.data.msg);
        });
      };

      this.$refs.xForm.validate((a) => {

        if (a) {
          let count = 0;
          for (let name in a) {
            a[name];
            count++;
          }
          this.$mk.error(`存在${count}项错误，请检查`);
        } else {
          save();
        }
      });


    },

    cancel() {
      this.$emit("callback", {});
    }
  },
  // 监听属性
  watch: {

  }
};

</script>
<style scoped lang="less">

.page-body {
  padding: 10px ;
  background:  @base-bg-color;
}
</style>
