<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.details"
      >
       <FormItem label="关联场景">
            <Select clearable  v-model="formValidate.scene_id" style="width:80px">
              <Option
                v-for="item in $store.state.app.sceneObj.scenes"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
        </FormItem>
        <FormItem label="主题名称" prop="details.name">
           <Input
            v-model="formValidate.details.name"
            placeholder="Enter something"
          ></Input>
        </FormItem>
        <FormItem label="简介" prop="details.summary">
          <Input
           type="textarea"
            v-model="formValidate.details.summary"
            placeholder="请输入内容"
          ></Input>
        </FormItem>
        <FormItem label="是否显示在首页背景">
          <i-switch :value='formValidate.is_home_background===1?true:false'  @on-change='(value)=>{change(value,1)}'/>
        </FormItem>
         <FormItem label="首页背景图片" prop="details.res_home_background_pic">
          <UploadS ref="res_home_background_pic" v-model="formValidate.details.res_home_background_pic" @del='formValidate.details.res_home_background_pic=""'/>
        </FormItem>
         <FormItem label="首页背景视频" prop="details.res_home_background_video">
          <UploadS ref="res_home_background_video" v-model="formValidate.details.res_home_background_video" :video='true'/>
        </FormItem>
         <FormItem label="是否显示为首页列表">
          <i-switch :value='formValidate.is_in_home_list===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否在探索列表页显示">
          <i-switch :value='formValidate.is_in_discover_list===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否在热门标签显示">
          <i-switch :value='formValidate.is_hottest===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否置热门顶">
          <i-switch :value='formValidate.is_hottest_top===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否在最新标签显示">
          <i-switch :value='formValidate.is_newest===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否置最新顶">
          <i-switch :value='formValidate.is_newest_top===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
         <FormItem label="是否在全部显示">
          <i-switch :value='formValidate.is_in_discover_all===1?true:false'  @on-change='(value)=>{change(value,2)}'/>
        </FormItem>
        <FormItem label="首页列表背景图" prop="details.res_home_list_pic">
          <UploadS ref="res_home_list_pic" v-model="formValidate.details.res_home_list_pic" />
        </FormItem>
            <FormItem label="探索页列表背景图" prop="details.res_discover_list_pic">
          <UploadS ref="res_discover_list_pic" v-model="formValidate.details.res_discover_list_pic" />
        </FormItem>
            <FormItem label="唱片背景图" prop="details.res_disc_cover_pic">
          <UploadS ref="res_disc_cover_pic" v-model="formValidate.details.res_disc_cover_pic" />
        </FormItem>
        <FormItem label="默认播放时长" >
            <InputNumber  v-model="formValidate.details.default_play_time"></InputNumber>
        </FormItem>
        <FormItem label="封面类型" >
             <RadioGroup v-model="formValidate.details.cover_type">
        <Radio label="0">
            <Icon type="logo-apple"></Icon>
            <span>图片</span>
        </Radio>
        <Radio label="1">
            <Icon type="logo-windows"></Icon>
            <span>视频</span>
        </Radio>
    </RadioGroup>
        </FormItem>
         <FormItem label="封面模糊" >
            <InputNumber  v-model="formValidate.details.cover_blur"></InputNumber>
        </FormItem>
         <FormItem label="封面图片" prop="details.res_cover_pic">
          <UploadS ref="res_cover_pic" v-model="formValidate.details.res_cover_pic" />
        </FormItem>
        <FormItem label="封面模式">
            <Select clearable  v-model="formValidate.details.cover_mode" style="width:80px">
              <Option
                v-for="item in cover_mode"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </Select>
        </FormItem>
         <FormItem label="封面视频" prop="details.res_cover_video">
          <UploadS ref="res_cover_video" v-model="formValidate.details.res_cover_video" :video='true'/>
        </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 {
  addThemes,
  editThemes
} from '@/api/themes'
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 {
  name: 'editTheme',
  props: {
    search: {
      type: Function,
      default: null
    },
    row: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    UploadS
  },
  data () {
    return {
      modalVisible: false,
      editMode: false,
      formTitle: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      cover_mode: [{ id: 0, name: '不位移' }, { id: 1, name: '随机方向' }, { id: 2, name: '上下位移' }, { id: 3, name: '左右位移' }, { id: 4, name: '从小到大' }, { id: 5, name: '从大到小' }],
      formValidate: {},
      ruleValidate: {
        'details.name': [_requireBlur],
        'details.summary': [_requireBlur],
        'details.res_home_background_pic': [_requirePic],
        'details.res_home_background_video': [_requirePic],
        'details.res_home_list_pic': [_requirePic],
        'details.res_discover_list_pic': [_requirePic],
        'details.res_disc_cover_pic': [_requirePic],
        'details.res_cover_pic': [_requirePic],
        'details.res_cover_video': [_requirePic]
      }
    }
  },
  watch: {
    visible: {
      handler: function (val) {
        this.modalVisible = val
        if (val) {
          this.search()
        }
        this.formValidate = this.row
      },
      immediate: true
    },
    row: {
      handler: function (val) {
        if (val.id === 'add') {
          this.editMode = false
          this.formTitle = '新增栏目'
          this.formValidate = {
            details: {
              name: '',
              summary: '',
              default_play_time: 1,
              cover_type: '',
              res_home_background_pic: '',
              res_home_background_video: '',
              res_home_list_pic: '',
              res_discover_list_pic: '',
              res_disc_cover_pic: '',
              res_cover_pic: '',
              res_cover_video: '',
              cover_blur: 0,
              cover_mode: 0
            },
            scene_id: 0,
            is_home_background: 0,
            is_in_discover_list: 0,
            is_in_home_list: 0,
            is_hottest: 1,
            is_hottest_top: 0,
            is_newest: 0,
            is_newest_top: 0,
            is_in_discover_all: 0
          }
        } else {
          this.editMode = true
          this.formTitle = '编辑栏目'
          this.formValidate = val
        }
      },
      immediate: true
    }
  },
  methods: {
    submit () {
      let res_home_background_pic = this.$refs['res_home_background_pic'].getData()
      let res_home_background_video = this.$refs['res_home_background_video'].getData()
      let res_home_list_pic = this.$refs['res_home_list_pic'].getData()
      let res_discover_list_pic = this.$refs['res_discover_list_pic'].getData()
      let res_disc_cover_pic = this.$refs['res_disc_cover_pic'].getData()
      let res_cover_pic = this.$refs['res_cover_pic'].getData()
      let res_cover_video = this.$refs['res_cover_video'].getData()
      if (res_home_background_pic) {
        this.formValidate.details.res_home_background_pic = res_home_background_pic
      }
      if (res_home_background_video) {
        this.formValidate.details.res_home_background_video = res_home_background_video
      }
      if (res_home_list_pic) {
        this.formValidate.details.res_home_list_pic = res_home_list_pic
      }
      if (res_discover_list_pic) {
        this.formValidate.details.res_discover_list_pic = res_discover_list_pic
      }
      if (res_disc_cover_pic) {
        this.formValidate.details.res_disc_cover_pic = res_disc_cover_pic
      }
      if (res_cover_pic) {
        this.formValidate.details.res_cover_pic = res_cover_pic
      }
      if (res_cover_video) {
        this.formValidate.details.res_cover_video = res_cover_video
      }
      console.log(this.formValidate)
      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) {
            editThemes(params).then((res) => {
              if (res.code === 200 && res.data.length > 0) {
                this.$Message.success('修改成功')
                this.close()
                this.search()
              }
            })
          } else {
            addThemes(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) {
      if (type === 1) {
        this.formValidate.is_in_home_lis = val ? 1 : 0
      }
      if (type === 2) {
        this.formValidate.is_in_discover_list = val ? 1 : 0
      }
    },
    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>
