<template>
  <div>
    <Drawer
      :title="formTitle"
      v-model="modalVisible"
      width="720"
      :mask-closable="false"
      :styles="styles"
      @on-close="close"
    >
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="150"
        v-if="formValidate.documents"
      >
       <FormItem label="关联购买页">
            <Select clearable  v-model="formValidate.page_id" style="width:150px">
              <Option
                v-for="item in list"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
        </FormItem>
        <FormItem label="套餐名" prop="title">
           <Input
           style="width: 60%;margin-right: 10px;"
            v-model="formValidate.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
        <FormItem label="左侧角标文案">
          <Input
          style="width: 60%;margin-right: 10px;"
            v-model="formValidate.documents.left_side"
            placeholder="Enter something"
          ></Input>
           <colorPicker v-model="formValidate.documents.left_side_color"  @change='(value)=>{change(value,1)}'></colorPicker>
        </FormItem>
         <FormItem label="右侧角标文案">
          <Input
          style="width: 60%;margin-right: 10px;"
            v-model="formValidate.documents.right_side"
            placeholder="Enter something"
          ></Input>
           <colorPicker v-model="formValidate.documents.right_side_color" @change='(value)=>{change(value,2)}'></colorPicker>
        </FormItem>
        <FormItem label="免费天数" prop="extra_days">
            <InputNumber  v-model="formValidate.extra_days"></InputNumber>
        </FormItem>
        <FormItem label="订阅周期" >
            <Select clearable  v-model="formValidate.sub_type" style="width:150px">
              <Option
                v-for="item in typeList"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
        </FormItem>
        <FormItem label="购买天数" prop="days">
            <InputNumber  v-model="formValidate.days"></InputNumber>
        </FormItem>
         <FormItem label="物品价格" prop="real_price">
            <InputNumber  v-model="formValidate.real_price"></InputNumber>
        </FormItem>
          <FormItem label="套餐第一行文案" prop="documents.first_doc">
             <Input
          style="width: 60%;margin-right: 10px;"
            v-model="formValidate.documents.first_doc"
            placeholder="Enter something"
          ></Input>
           <colorPicker v-model="formValidate.documents.first_doc_color" @change='(value)=>{change(value,3)}'></colorPicker>
        </FormItem>
          <FormItem label="套餐第二行文案" prop="documents.second_doc">
             <Input
          style="width: 60%;margin-right: 10px;"
            v-model="formValidate.documents.second_doc"
            placeholder="Enter something"
          ></Input>
           <colorPicker v-model="formValidate.documents.second_doc_color" @change='(value)=>{change(value,4)}'></colorPicker>
        </FormItem>
          <FormItem label="套餐第三行文案" prop="documents.third_doc">
           <Input
          style="width: 60%;margin-right: 10px;"
            v-model="formValidate.documents.third_doc"
            placeholder="Enter something"
          ></Input>
           <colorPicker v-model="formValidate.documents.third_doc_color" @change='(value)=>{change(value,5)}'></colorPicker>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="close">取消</Button>
        <Button type="primary" @click="submit">保存</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import UploadS from '@/view/common/upload.vue'
import {
  addVips,
  editVips
} from '@/api/vip'
const _requireBlur = { required: true, message: ' ', trigger: 'blur' }
const validatorPic = (rule, value, callback) => {
  if (!value) {
    callback(new Error(' '))
  } else {
    callback()
  }
}
const _requirePic = { required: true, message: ' ', trigger: 'blur', validator: validatorPic }
export default {
  props: {
    search: {
      type: Function,
      default: null
    },
    row: {
      type: Object,
      default: () => {}
    },
    list: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadS
  },
  data () {
    return {
      color: '#ff0000',
      modalVisible: false,
      editMode: false,
      formTitle: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formValidate: {},
      typeList: [{ id: 1, name: '月付' }, { id: 2, name: '季付' }, { id: 3, name: '年付' }],
      ruleValidate: {
        'documents.first_doc': [_requireBlur],
        'documents.second_doc': [_requireBlur],
        'documents.third_doc': [_requireBlur],
        'title': [_requireBlur],
        'days': [_requirePic],
        'real_price': [_requirePic],
        'sub_type': [_requirePic],
        'extra_days': [_requirePic]
      }
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        this.modalVisible = val
        this.formValidate = this.row
      },
      immediate: true
    },
    row: {
      handler: function (val) {
        console.log(val)
        if (val.id === 'add') {
          this.editMode = false
          this.formTitle = '新增VIP购买套餐'
          this.formValidate = {
            documents: {
              left_side: '',
              left_side_color: '#c18960',
              right_side: '',
              right_side_color: '#c18960',
              first_doc: '',
              first_doc_color: '#c18960',
              second_doc: '',
              second_doc_color: '#c18960',
              third_doc: '',
              third_doc_color: '#c18960'
            },
            page_id: null,
            title: '',
            extra_days: 0,
            sub_type: 0,
            real_price: 0
          }
        } else {
          this.editMode = true
          this.formTitle = '编辑VIP购买套餐'
          this.formValidate = val
        }
      },
      immediate: true
    }
  },
  methods: {
    submit () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          delete this.formValidate.created_at
          delete this.formValidate.deleted_at
          delete this.formValidate.updated_at
          let params = [this.formValidate]
          if (this.editMode) {
            editVips(params).then((res) => {
              if (res.code === 200 && res.data.length > 0) {
                this.$Message.success('修改成功')
                this.close()
                this.search()
              }
            })
          } else {
            addVips(params).then((res) => {
              if (res.code === 200 && res.data.length > 0) {
                this.$Message.success('新增成功')
                this.close()
                this.search()
              }
            })
          }
        } else {
          this.$Message.error('您还有必填项未填写')
        }
      })
    },
    change (val, type) {
      switch (type) {
        case 1:
          this.formValidate.documents.left_side_color = val
          break
        case 2:
          this.formValidate.documents.right_side_color = val
          break
        case 3:
          this.formValidate.documents.first_doc_color = val
          break
        case 4:
          this.formValidate.documents.second_doc_color = val
          break
        default:
          this.formValidate.documents.third_doc_color = val
          break
      }
    },
    close () {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
