<template>
  <div>
    <Drawer
      :title="formTitle"
      v-model="modalVisible"
      width="990"
      :mask-closable="false"
      :styles="styles"
      @on-close="close"
    >
      <Form
        ref="formValidate"
        :label-width="150"
      >
       </FormItem>
             <FormItem label="标题">
            <Input
              v-model="survey.title"
              placeholder=" "
            ></Input>
          </FormItem>
           </FormItem>
             <FormItem label="小标题">
            <Input
             v-model="survey.subtitle"
              placeholder=" "
            ></Input>
          </FormItem>
           </FormItem>
            <FormItem label="测试内容">
               <editor ref="editors" v-model="survey.remark"/>
          </FormItem>
            <FormItem label="测试封面">
            <UploadS ref="pic"  v-model="survey.pic"/>
          </FormItem>
           <FormItem label="测试题价格">
            <InputNumber v-model="survey.price"></InputNumber>
          </FormItem>
            <!-- <FormItem label="优惠价格">
            <InputNumber  ></InputNumber>
          </FormItem> -->
         </FormItem>
         </FormItem>
           <FormItem label="测试耗时[单位分钟]">
            <InputNumber v-model="survey.timeConsume"></InputNumber>
        </FormItem>
         </FormItem>
           <FormItem label="测试过的人数">
            <InputNumber v-model="survey.testedNum"></InputNumber>
        </FormItem>
         <div style="padding-left: 151px;margin-bottom: 15px;">
            <a @click="addQue">添加问题</a><a @click="delQue" v-if="questions.length>1" style="margin-left: 20px;">删除问题</a>
          </div>
          <span v-for="(item,index) in questions" :key='item.id'>
           <FormItem label="题目描述">
          <Input
           v-model="item.content"
            style="margin-bottom: 10px;"
            placeholder=" "
          ></Input>
        </FormItem>
          <FormItem label="选项">
          <span v-for="i in item.answers" :key='i.id'>
          <Input
           v-model="i.content"
            style="width:60%;margin-bottom: 10px;"
            placeholder=" "
          ></Input>
           <span style="margin-left: 20px;">分值：</span>
           <InputNumber v-model="i.score" style="width:20%;margin-bottom: 10px; margin-left: 5px;"
            placeholder="请输入分值" ></InputNumber>
            </span>
             <div>
            <Icon
              @click="addAnswers(index)"
              :size="20"
              color="#7744FF"
              style="margin-right: 6px;"
              type="md-add"
            /><Icon
            v-if="item.answers.length>1"
              @click="delAnswers(index)"
              color="#7744FF"
              :size="20"
              type="md-remove"
            />
          </div>
        </FormItem>
         </span>
         <div style="padding-left: 151px;margin-bottom: 15px;">
            <a @click="addResults">添加结果</a><a @click="delResults" v-if="results.length>1" style="margin-left: 20px;">删除结果</a>
          </div>
          <span v-for="item in results" :key='item.id'>
          <FormItem label="结果标题">
          <Input
            v-model="item.title"
            style="width:50%;margin-bottom: 10px;"
            placeholder=" "
          ></Input>
          <span style="margin-left: 20px;">最小值：</span>
           <InputNumber v-model="item.minData" style="width:15%;margin-bottom: 10px; margin-left: 5px;"
            ></InputNumber>
            <span style="margin-left: 20px;">最大值：</span>
           <InputNumber v-model="item.maxData" style="width:15%;margin-bottom: 10px; margin-left: 5px;"
           ></InputNumber>
        </FormItem>
          <FormItem label="结果描述">
             <editor v-model="item.remark"/>
          </FormItem>
          </span>
      </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 Editor from '_c/editor'
import {
  getDetailInfo,
  addTest,
  updateTest
} from '@/api/api'
export default {
  name: 'editTheme',
  props: {
    search: {
      type: Function,
      default: null
    },
    treeData: {
      type: Array,
      default: () => []
    },
    row: {
      type: Object,
      default: () => {}
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    Editor,
    UploadS
  },
  data () {
    return {
      formValidate: {},
      survey: {},
      results: [{
        title: '',
        minData: 0,
        maxData: 0,
        remark: ''
      }],
      questions: [
        {
          content: '',
          answers: [{
            content: '',
            score: 0
          }]
        }
      ],
      modalVisible: false,
      editMode: false,
      formTitle: '',
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      }
    }
  },
  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.survey = {
            price: 1,
            timeConsume: 1,
            testedNum: 1
          },
          this.results = [{
            title: '',
            minData: 0,
            maxData: 0,
            remark: ''
          }],
          this.questions = [
            {
              content: '',
              answers: [{
                content: '',
                score: 0
              }]
            }
          ],
          this.formTitle = '新增自测'
        } else {
          this.editMode = true
          this.formTitle = '编辑自测'
          getDetailInfo({ id: val.id }).then((res) => {
            this.survey = res.data.survey
            this.changeContent(this.survey.remark)
            this.results = res.data.results
            this.questions = res.data.questions
          })
        }
      },
      immediate: true
    }
  },
  mounted () {

  },
  methods: {
    changeContent (p) {
      this.$refs.editors.setHtml(p)
    },
    handleChange (html, text) {
      console.log(html, text)
    },
    submit () {
      let pic = this.$refs['pic'].getData()
      if (pic) {
        this.survey.pic = pic
      }
      let params = this.survey
      params.results = JSON.stringify(this.results)
      params.questions = JSON.stringify(this.questions)
      if (this.editMode) {
        delete params.createTime
        updateTest(params).then((res) => {
          if (res.status === 200) {
            this.$Message.success('修改成功')
            this.close()
            this.search()
          } else {
            this.$Message.error(res.msg)
          }
        })
      } else {
        addTest(params).then((res) => {
          if (res.status === 200) {
            this.$Message.success('新增成功')
            this.close()
            this.search()
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    },
    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
      }
    },
    addResults () {
      this.results.unshift({
        title: '',
        minData: 0,
        maxData: 0,
        remark: ''
      })
    },
    delResults () {
      this.results.splice(
        this.results.length - 1,
        1
      )
    },
    addQue () {
      this.questions.unshift({
        content: '',
        answers: [{
          content: '',
          score: 0
        }]
      })
    },
    delQue () {
      this.questions.splice(
        this.questions.length - 1,
        1
      )
    },
    addAnswers (idx) {
      this.questions[idx].answers.unshift({
        content: '',
        score: 0
      })
    },
    delAnswers (idx) {
      this.questions[idx].answers.splice(
        this.questions[idx].answers.length - 1,
        1
      )
    },
    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>
