<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"
      >
        <Tabs type="card" @on-click='onClick'>
        <TabPane label="商品"></TabPane>
        <TabPane label="展示页"></TabPane>
      </Tabs>
      <template v-if="type===0">
        <FormItem label="商品名称" prop="title">
           <Input
            v-model="formValidate.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
          <FormItem label="是否所有用户免费">
          <i-switch :value='formValidate.is_all_free===1?true:false'  @on-change='(value)=>{change(value,1)}'/>
        </FormItem>
          <FormItem label="是否要求VIP">
          <i-switch :value='formValidate.need_vip===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
          <FormItem label="VIP用户免费">
          <i-switch :value='formValidate.is_vip_free ===1?true:false'  @on-change='(value)=>{change(value,3)}'/>
        </FormItem>
        <FormItem label="VIP折扣" prop="vip_off">
           <InputNumber v-model="formValidate.vip_off"></InputNumber>
        </FormItem>
         <FormItem label="划去价格" prop="normal_price">
            <InputNumber  v-model="formValidate.normal_price"></InputNumber>
        </FormItem>
         <FormItem label="实际价格" prop="real_price">
            <InputNumber  v-model="formValidate.real_price"></InputNumber>
        </FormItem>
        </template>
        <template v-else>
         <FormItem label="页面主标题" prop="show_title">
          <Input
            v-model="formValidate.show_title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
          <FormItem label="是否开启介绍板块">
          <i-switch :value='formValidate.intro_section.is_enable===1?true:false'  @on-change='(value)=>{change(value,4)}'/>
        </FormItem>
         <FormItem label="标题" prop="intro_section.title">
          <Input
            v-model="formValidate.intro_section.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
         <FormItem label="是否显示热销角标" >
          <i-switch :value='formValidate.intro_section.is_hot===1?true:false'  @on-change='(value)=>{change(value,5)}'/>
        </FormItem>
         <FormItem label="介绍" prop="show_title">
          <Input
           type="textarea"
            v-model="formValidate.intro_section.introduction"
            placeholder="Enter something"
          ></Input>
            </FormItem>
             <FormItem label="是否开启特色板块">
          <i-switch :value='formValidate.special_section.is_enable===1?true:false'  @on-change='(value)=>{change(value,6)}'/>
        </FormItem>
        <FormItem label="标题" prop="show_title">
          <Input
            v-model="formValidate.special_section.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
         <FormItem label="特色" prop="show_title">
          <Input
            style="margin-bottom: 10px;"
            v-for="(item, idx) in formValidate.special_section.features"
            :key="idx"
            v-model="item.name"
            placeholder="Enter something"
          ></Input>
          <div>
            <Icon
              @click="addFeatures"
              :size="20"
              color="#7744FF"
              style="margin-right: 6px;"
              type="md-add"
            /><Icon
              v-if="formValidate.special_section.features.length > 1"
              @click="delFeatures"
              color="#7744FF"
              :size="20"
              type="md-remove"
            />
          </div>
        </FormItem>
         <FormItem label="是否开启课程体系板块">
          <i-switch :value='formValidate.content_section.is_enable===1?true:false'  @on-change='(value)=>{change(value,7)}'/>
        </FormItem>
        <FormItem label="标题" prop="show_title">
          <Input
            v-model="formValidate.content_section.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
         <FormItem label="展示图片" prop="show_title">
          <UploadS  maxLength="20" ref="content_section_res_content_pics" v-model="formValidate.content_section.res_content_pics" />
        </FormItem>
            <FormItem label="是否开启课程目录">
          <i-switch :value='formValidate.content_table.is_enable===1?true:false'  @on-change='(value)=>{change(value,8)}'/>
        </FormItem>
         <FormItem label="标题" prop="show_title">
          <Input
            v-model="formValidate.content_table.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
        <FormItem label="课程目录" prop="show_title">
          <div ref="editor" style="text-align:left"></div>
            </FormItem>
            <FormItem label="是否开启条目内容板块">
          <i-switch :value='formValidate.course_struct_section.is_enable===1?true:false'  @on-change='(value)=>{change(value,9)}'/>
        </FormItem>
        <FormItem label="标题" prop="show_title">
          <Input
            v-model="formValidate.course_struct_section.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
         <FormItem label="展示图片" prop="show_title">
          <UploadS  maxLength="20" ref="course_struct_section_res_content_pics" v-model="formValidate.course_struct_section.res_content_pics" />
        </FormItem>
         <FormItem label="是否开启用户评价板块">
          <i-switch
            :value="formValidate.user_comment_section.is_enable === 1 ? true : false"
            @on-change="
              value => {
                change(value, 10);
              }
            "
          />
        </FormItem>
         <FormItem label="标题" prop="show_title">
            <Input
              v-model="formValidate.user_comment_section.title"
              placeholder="Enter something"
            ></Input>
          </FormItem>
        <div v-for="(item, idx) in formValidate.user_comment_section.comments"
            :key="idx">
          <FormItem label="用户头像" prop="show_title">
            <UploadS
              :ref="gravatar+idx.toString()"
              v-model="item.gravatar"
            />
          </FormItem>
          <FormItem label="用户昵称" prop="show_title">
            <Input
              v-model="item.nickname"
              placeholder="Enter something"
            ></Input>
          </FormItem>
           <FormItem label="评论内容"  prop="show_title">
            <Input
              v-model="item.comment" type="textarea"
              placeholder="Enter something"
            ></Input>
          </FormItem>
        </div>
        <div style="margin-left: 150px;margin-bottom: 20px;">
            <Icon
              @click="addComments"
              :size="20"
              color="#7744FF"
              style="margin-right: 6px;"
              type="md-add"
            /><Icon
              v-if="formValidate.user_comment_section.comments.length > 1"
              @click="delComments"
              color="#7744FF"
              :size="20"
              type="md-remove"
            />
          </div>
           <FormItem label="是否开启纯图展示板块">
          <i-switch :value='formValidate.show_section.is_enable===1?true:false'  @on-change='(value)=>{change(value,11)}'/>
        </FormItem>
        <FormItem label="标题" prop="show_title">
          <Input
            v-model="formValidate.show_section.title"
            placeholder="Enter something"
          ></Input>
        </FormItem>
         <FormItem label="展示图片" prop="show_title">
          <UploadS maxLength="20" ref="show_section_res_show_pics" v-model="formValidate.show_section.res_show_pics" />
        </FormItem>
        </template>
      </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 E from 'wangeditor'
import {
  addShop,
  editShop
} from '@/api/shop'
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: () => {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadS
  },
  data () {
    return {
      type: 0,
      gravatar: 'gravatar',
      modalVisible: false,
      editMode: false,
      formTitle: '',
      editorContent: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formValidate: {},
      ruleValidate: {
        'title': [_requireBlur],
        'vip_off': [_requirePic],
        'normal_price': [_requirePic],
        'real_price': [_requirePic],
        'show_title': [_requireBlur],
        'intro_section.title': [_requireBlur],
        'intro_section.introduction': [_requireBlur],
        'details.res_home_background_pic': [_requirePic],
        'details.res_discover_list_pic': [_requirePic]
      }
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        this.modalVisible = val
      },
      immediate: true
    },
    row: {
      handler: function (val) {
        console.log(val)
        if (val.id === 'add') {
          this.editMode = false
          this.formTitle = '新增商品'
          this.formValidate = {
            title: '',
            need_vip: 0,
            is_all_free: 0,
            is_vip_free: 0,
            vip_off: 0,
            normal_price: 0,
            real_price: 0,
            show_title: '',
            intro_section: {
              title: '',
              is_hot: 0,
              is_enable: 1,
              introduction: ''
            },
            special_section: {
              features: [{ name: '' }],
              is_enable: 1,
              title: ''
            },
            content_section: {
              is_enable: 1,
              res_content_pics: [],
              title: ''
            },
            course_struct_section: {
              is_enable: 1,
              res_content_pics: [],
              title: ''
            },
            content_table: {
              is_enable: 1,
              tables: '',
              title: ''
            },
            user_comment_section: {
              is_enable: 1,
              title: '',
              comments: [{ comment: '', gravatar: '', nickname: '' }]
            },
            show_section: {
              is_enable: 1,
              res_show_pics: [],
              title: ''
            }
          }
        } else {
          this.editMode = true
          this.formTitle = '编辑商品'
          this.formValidate = val
          this.formValidate.special_section.features = val.special_section.features !== null && val.special_section.features.map((p) => {
            let params = {
              'name': p
            }
            return params
          })
        }
      },
      immediate: true
    }
  },
  mounted () {

  },
  methods: {
    addFeatures () {
      this.formValidate.special_section.features.push({ name: '' })
    },
    delFeatures () {
      this.formValidate.special_section.features.splice(
        this.formValidate.special_section.features.length - 1,
        1
      )
    },
    addComments () {
      this.formValidate.user_comment_section.comments.push({ comment: '', gravatar: '', nickname: '' })
    },
    delComments () {
      this.formValidate.user_comment_section.comments.splice(
        this.formValidate.user_comment_section.comments.length - 1,
        1
      )
    },
    onClick (e) {
      this.type = e
      if (e === 0) {
        this.formTitle = '商品'
      } else {
        this.formTitle = '展示页'
        this.$nextTick(() => {
          var editor = new E(this.$refs.editor)
          editor.customConfig.onchange = (html) => {
            this.editorContent = html
          }
          editor.create()
          editor.txt.html(this.row.content_table && this.row.content_table.tables)
        })
      }
      console.log(this.type)
    },
    submit () {
      if (this.type === 1) {
        this.formValidate.content_table.tables = this.editorContent
        console.log(this.editorContent)
        let content_section_res_content_pics = this.$refs['content_section_res_content_pics'].getData()
        if (content_section_res_content_pics) {
          this.formValidate.content_section.res_content_pics = typeof content_section_res_content_pics === 'string' ? [content_section_res_content_pics] : content_section_res_content_pics
        }
        let course_struct_section_res_content_pics = this.$refs['course_struct_section_res_content_pics'].getData()
        if (course_struct_section_res_content_pics) {
          this.formValidate.course_struct_section.res_content_pics = typeof course_struct_section_res_content_pics === 'string' ? [course_struct_section_res_content_pics] : course_struct_section_res_content_pics
        }
        let show_section_res_show_pics = this.$refs['show_section_res_show_pics'].getData()
        if (show_section_res_show_pics) {
          this.formValidate.show_section.res_show_pics = typeof show_section_res_show_pics === 'string' ? [show_section_res_show_pics] : show_section_res_show_pics
        }
        this.formValidate.user_comment_section.comments.forEach((p, idx) => {
          let refgravatar = this.gravatar + idx.toString()
          let gravatars = this.$refs[refgravatar][0].getData()
          if (gravatars) {
            p.gravatar = gravatars
          }
        })
      }
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.formValidate.special_section.features = this.formValidate.special_section.features.map((p) => {
            return p.name
          })
          delete this.formValidate.created_at
          delete this.formValidate.deleted_at
          delete this.formValidate.updated_at
          let params = [this.formValidate]
          if (this.editMode) {
            editShop(params).then((res) => {
              if (res.code === 200 && res.data.length > 0) {
                this.$Message.success('修改成功')
                this.close()
                this.search()
              }
            })
          } else {
            addShop(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.is_all_free = val ? 1 : 0
          break
        case 2:
          this.formValidate.need_vip = val ? 1 : 0
          break
        case 3:
          this.formValidate.is_vip_free = val ? 1 : 0
          break
        case 4:
          this.formValidate.intro_section.is_enable = val ? 1 : 0
          break
        case 5:
          this.formValidate.intro_section.is_hot = val ? 1 : 0
          break
        case 6:
          this.formValidate.special_section.is_enable = val ? 1 : 0
          break
        case 7:
          this.formValidate.content_section.is_enable = val ? 1 : 0
          break
        case 8:
          this.formValidate.content_table.is_enable = val ? 1 : 0
          break
        case 9:
          this.formValidate.course_struct_section.is_enable = val ? 1 : 0
          break
        case 10:
          this.formValidate.user_comment_section.is_enable = val ? 1 : 0
          break
        default:
          this.formValidate.show_section.is_enable = val ? 1 : 0
          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>
