<template>
  <div>
    <xy-dialog ref="dialog" :is-show.sync="isShow" type="form" :title="type === 'add' ? '新增课程' : '编辑课程'" :form="form"
      :rules="rules" @submit="submit">
      <template v-slot:title>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>课程名称：
          </div>
          <div class="xy-table-item-content">
            <el-input v-model="form.title" placeholder="请输入课程名称" clearable style="width: 300px;"></el-input>
          </div>
        </div>
      </template>
      <template v-slot:course_list>
        <div class="xy-table-item">
          <div class="xy-table-item-label">课程表：</div>
          <div class="xy-table-item-content">
            <Button type="primary" icon="md-add" style="margin-bottom: 10px"
              @click="form.course_list.push({ sortnumber:0,name: '',theme:'',time:'', address: '',speaker:'',link:'' })">新增</Button>

            <xy-table style="width: 80%" :height="560" :is-page="false" :showIndex='false' :list="form.course_list"
              :table-item="contentTable">
              <template v-slot:btns>
                <el-table-column label="操作" width="90" header-align="center" align="center">
                  <template v-slot:default="scope">
                    <Poptip transfer confirm title="确认要删除吗？" @on-ok="delItem(scope.row.id,scope.$index)">
                      <Button size="small" type="primary" ghost>删除</Button>
                    </Poptip>

                  </template>
                </el-table-column>
              </template>
            </xy-table>
          </div>
        </div>
      </template>

    </xy-dialog>

  </div>
</template>

<script>
  import {
    store,
    show,
    save,
    delCourseItem
  } from "@/api/course"
  import {
    Message
  } from 'element-ui'
  import {
    index
  } from "@/api/activity"

  export default {
    data() {
      return {
        isShow: false,
        type: 'add',
        id: '',
        form: {
          title: '',
          course_list: []
        },
        rules: {
          title: [{
            required: true,
            message: '请选择主题'
          }]
        },
        activeList: [],
        contentTable: [{
            label: "序号",
            minWidth: 80,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写序号"
                type = "text"
                v-model = {
                  row.sortnumber
                } >
                </el-input>
              );
            },
          },
          {
            label: "关联活动",
            width: 240,
            customFn: (row) => {
              return ( <el-select placeholder = "请选择关联活动"
                style = "width: 240px"
                v-model = {
                  row.name
                }
                clearable filterable on = {
                  {
                    ["change"]: (e) => this.changeActive(e, row),
                  }
                } >
                {
                  this.activeList.map((item, index) => {
                    return ( <el-option
                      // v-for={item in activeList}
                      value = {item}
                      key = {item.id}
                      label = {item.active_name} >
                      </el-option>
                    )

                  })
                } </el-select>

              );
            },
          },
          {
            label: "主题",
            minWidth: 240,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写主题"
                type = "text"
                v-model = {
                  row.theme
                } >
                </el-input>
              );
            },
          },
          {
            label: "时间",
            minWidth: 180,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写时间"
                type = "text"
                v-model = {
                  row.time
                }>
                </el-input>
              );
            },
          },
          {
            label: "上课地址",
            minWidth: 240,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写上课地址"
                type = "text"
                v-model = {
                  row.address
                } >
                </el-input>
              );
            },
          },
          {
            label: "主讲",
            minWidth: 180,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写主讲"
                type = "text"
                v-model = {
                  row.speaker
                } >
                </el-input>
              );
            },
          },
          {
            label: "链接",
            minWidth: 180,
            customFn: (row, scope) => {
              return ( <el-input placeholder = "请填写链接"
                type = "text"
                v-model = {
                  row.link
                } >
                </el-input>
              );
            },
          }
        ],
      }
    },
    created() {
      this.getActivity()
    },
    methods: {
      delItem(id, index) {
        if (id) {
          delCourseItem({
            id: id
          }).then(res=>{
            Message({
              type: 'success',
              message: '删除成功'
            })
            this.form.course_list.splice(index, 1)
          })

        } else {
          this.form.course_list.splice(index, 1)
        }
      },
      async getActivity() {
        const res = await index({
          page_size: 99,
          page: 1,
        });
        this.activeList = res?.data;
      },
      changeActive(e, row) {
        row.name = e.active_name
        row.theme = e.active_name
        row.time = e.start_date + ' ' + e.start_time
        //
        row.address = e.address
        row.speaker = e.lecturer
        row.link = '/pages/active/detail?id=' + e.id

      },
      returnDate(date, time) {
        let str = ''
        let dates = date.split('-')
        let md = parseInt(dates[1]) + '月' + parseInt(dates[2]) + '日'
        str = md + '/' + time
      },
      async getDetail() {
        const res = await show({
          id: this.id
        })
        this.form = {
          title: res?.title,
          course_list: res?.item
        }

      },
      submit() {
        if (this.type === 'add') {
          console.log(this.form)
          // return
          store({
            title: this.form.title,
            course_list: this.form.course_list
          }).then(res => {
            Message({
              type: 'success',
              message: '新增课程成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
          return
        }
        if (this.type === 'editor') {
          save({
            id: this.id,
            title: this.form.title,
            course_list: this.form.course_list
          }).then(res => {
            Message({
              type: 'success',
              message: '编辑课程成功'
            })
            this.isShow = false
            this.$emit('refresh')
          })
        }
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          if (this.type === 'editor' || this.type === 'copy') {
            this.getDetail()
          }
        } else {
          this.id = ''
          this.type = ''
          this.$refs['dialog'].reset()
        }
      }
    }

  }
</script>

<style scoped lang="scss">
  .xy-table-item-label {
    width: 160px;
  }

  .img__delete {
    transform: scale(0.8, 0.8);

    position: absolute;
    top: 4px;
    right: 4px;
  }

  ::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  ::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .el-upload--picture-card {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px !important;
    height: 80px !important;
    line-height: 80px !important;
    text-align: center;
  }

  ::v-deep .avatar {
    width: 80px !important;
    display: block;
    border-radius: 6px;
  }

  ::v-deep .xy-table-item-label {
    width: 160px !important;
  }

  ::v-deep .el-date-editor .el-range-separator {
    width: auto !important;
  }

  ::v-deep .el-input-number .el-input__inner {
    text-align: left !important;
  }

  .searchCompanys {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;

    .el-input {
      width: 80%
    }
  }
</style>
