<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" :disabled="disabled">
      <el-form-item label="标签名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入标签名称" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="标签排序：" prop="sort">
        <el-input-number v-model="form.sort" :min="1" label="描述文字" />
      </el-form-item>
      <el-form-item label="频道属性：" prop="channelType">
        <el-select v-model="form.channelType" placeholder="请选择频道属性" @change="handleChange">
          <el-option v-for="item in channelTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="频道名称：" prop="channelName">
        <el-input v-model="form.channelName" placeholder="请输入频道名称" maxlength="100" show-word-limit />
      </el-form-item>
      <el-form-item label="频道介绍：" prop="channelDescribe">
        <el-input v-model="form.channelDescribe" type="textarea" placeholder="请输入频道简介"
          :autosize="{ minRows: 5, maxRows: 10 }" maxlength="300" show-word-limit />
      </el-form-item>
      <el-form-item label="频道封面：" prop="channelCover">
        <Upload listType="picture-card" :url="form.channelCover" @upload="upload" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="频道内容：" style="width: 100%;">
        <el-button type="primary" @click="getDialog" :disabled="!form.channelType">关联内容</el-button>
        <el-table :data="form.listagCategoryAudio">
          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
          <el-table-column label="音频封面" align="center" width="100px">
            <template slot-scope="scope">
              <el-image :src="scope.row.audioPic" />
            </template>
          </el-table-column>
          <el-table-column label="音频作者" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{ scope.row.singerName ? scope.row.singerName : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>
                {{ scope.row.songName ? scope.row.songName : '-' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioTypeFormatter" />
          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
          <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="delete" @click="getDelete(scope.row.audioId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div class="form-btn">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>

    <!-- 弹窗 -->
    <Dialog :visible="dialogVisible" :data="form.listagCategoryAudio" :channelType="form.channelType" @close="close" />
  </div>
</template>

<script>
import Dialog from '@/components/Dialog/index.vue'
import { submitThree, detail } from '@/api/operation/tag'
import { platformMixin, isFreeMixin, audioMixin, disabledMixin } from '@/mixin/index'
export default {
  components: {
    Dialog
  },
  mixins: [platformMixin, isFreeMixin, audioMixin, disabledMixin],
  data() {
    return {
      // 表单
      form: {
        listagCategoryAudio: []
      },
      channelTypeOptions: [
        { value: 2, label: '广播' },
        { value: 6, label: '节目' },
        { value: 8, label: '专辑' }
      ],
      // 弹窗
      dialogVisible: false,
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入标签名称', trigger: 'blur'
        }],
        sort: [{
          required: true, message: '请选择标签排序', trigger: 'change'
        }],
        channelType: [{
          required: true, message: '请选择频道类型', trigger: 'change'
        }],
        channelName: [{
          required: true, message: '请输入频道名称', trigger: 'blur'
        }],
        channelDescribe: [{
          required: true, message: '请输入频道简介', trigger: 'blur'
        }],
        channelCover: [{
          required: true, message: '请上传频道封面', trigger: 'change'
        }]
      },
      // 只读
      disabled: false
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.disabled = Boolean(this.$route.query.disabled)
      this.getDetail()
    }
    if (this.$route.query.pid) {
      this.form.pid = this.$route.query.pid
    }
    this.getPlatform({})
  },
  methods: {
    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
        }
      })
    },

    // 上传
    upload(e) {
      this.form.channelCover = e.file
    },

    // 修改频道属性清空关联内容
    handleChange() {
      this.form.ids = this.form.listagCategoryAudio = []
    },

    // 弹窗
    getDialog() {
      this.dialogVisible = true
    },

    // 关闭弹窗
    close() {
      this.dialogVisible = false
    },

    // 删除
    getDelete(id) {
      this.form.listagCategoryAudio = this.form.listagCategoryAudio.filter(i => i.audioId !== id)
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage("/operation/tag");
    },

    // 确定
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let title = this.form.id ? '编辑' : '新增'
          this.form.ids = []
          this.form.listagCategoryAudio.map(i => {
            this.form.ids.push(i.audioId)
          })
          submitThree(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success(`${title}成功！`)
              if (title === '新增') {
                this.cancel
              } else {
                this.getDetail()
              }
            }
          })
        } else {
          return false
        }
      })
    },

    // 字典翻译
    audioTypeFormatter(row) {
      return this.selectDictLabel(this.audioOptions, row.audioType)
    },
    statusFormatter(row) {
      return this.selectDictLabel(this.disabledOptions, row.status)
    },
    platfromFormatter(row) {
      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
    },
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 500px;
}

::v-deep .el-dialog__body {
  height: 610px;
  overflow-y: scroll;
}
</style>