<template>
  <div class="app-container">
    <el-form :model="form" ref="form" :rules="rules" label-width="110px" :disabled="disabled">
      <el-form-item label="唤醒音名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入唤醒音名称" />
      </el-form-item>
      <el-form-item label="频道属性：" prop="attributeType">
        <el-select v-model="form.attributeType" placeholder="请选择频道属性">
          <el-option v-for="item in channelOptions" :key="item.value" :value="item.value" :label="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="关联设备：" prop="deviceIds">
        <el-select v-model="form.deviceIds" filterable multiple placeholder="请选择关联设备">
          <el-option v-for="item in deviceOptions" :key="item.clientTypeId" :value="item.clientTypeId.toString()"
            :label="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item label="唤醒音封面：" prop="pic">
        <Upload listType="picture-card" :url="form.pic" @upload="upload" :disabled="disabled" />
      </el-form-item>
      <el-form-item label="唤醒音内容:" style="width: 1000px">
        <el-button type="primary" icon="el-icon-plus" :disabled="!form.attributeType" @click="getDialog">
          关联内容
        </el-button>
        <el-table :data="form.audioDefaultResp">
          <el-table-column label="音频ID" align="center" prop="audioId" show-overflow-tooltip />
          <el-table-column label="音频名称" align="center" prop="audioName" 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="付费类型" align="center" prop="isFree" :formatter="freeFormatter" />
          <el-table-column label="资源平台" align="center" prop="platformId" :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)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <div style="margin-left: 110px">
      <el-button @click="cancel">取消</el-button>
      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
    </div>

    <!-- 弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="关联内容" width="1100px">
      <el-form inline size="mini" style="width:100%">
        <el-form-item label="音频类型：">
          <el-select v-if="form.attributeType" v-model="dialogForm.audioType" placeholder="请选择音频类型">
            <el-option v-for="item in channelOptions.find(i => i.value === form.attributeType).children" :key="item.value"
              :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="资源平台：">
          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
            <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="内容名称：">
          <el-input v-model="dialogForm.keyword" placeholder="请输入内容名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
          <el-button icon="el-icon-refrash" @click="getRefrash">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" ref="table" :row-key="getRowKey" @selection-change="getChange">
        <el-table-column type="selection" align="center" :reserve-selection="true" />
        <el-table-column label="音频ID" align="center" prop="audioId" show-overflow-tooltip />
        <el-table-column label="音频名称" align="center" prop="audioName" 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="付费类型" align="center" prop="isFree" :formatter="freeFormatter" />
        <el-table-column label="资源平台" align="center" prop="platformId" :formatter="platfromFormatter" />
      </el-table>
      <div slot="footer">
        <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
          @pagination="getList" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/operation/channel'
import { detail, devices, submit } from '@/api/operation/waken'
import { platformMixin, isFreeMixin, disabledMixin } from '@/mixin/index'
export default {
  mixins: [platformMixin, isFreeMixin, disabledMixin],
  data() {
    return {
      // 表单
      form: {
        deviceIds: [],
        pic: '',
        audioDefaultResp: []
      },
      // 列表
      tableData: [],
      // 频道属性
      channelOptions: [{
        value: 1,
        label: '广播',
        children: [{
          value: 2,
          label: '广播电台'
        }]
      }, {
        value: 3,
        label: '节目',
        children: [{
          value: 6,
          label: '节目'
        }, {
          value: 11,
          label: '歌曲'
        }]
      }],
      // 关联设备
      deviceOptions: [],
      // 弹窗
      dialogVisible: false,
      // 弹窗表单
      dialogForm: {
        pageNum: 1,
        pageSize: 10,
        platformId: null,
        audioType: null,
        status: 1
      },
      // 总数
      total: 0,
      // 弹窗列表
      tableData: [],
      // 校验
      rules: {
        name: [{
          required: true, message: '请输入唤醒音名称', trigger: 'blur'
        }],
        attributeType: [{
          required: true, message: '请选择频道属性', trigger: 'change'
        }],
        deviceIds: [{
          required: true, message: '请选择关联设备', trigger: 'change'
        }],
        pic: [{
          required: true, message: '请上传封面', trigger: 'change'
        }]
      },
      // 只读
      disabled: Boolean(this.$route.query.boolean)
    }
  },
  watch: {
    'form.attributeType'(val) {
      if (val) {
        this.dialogForm.audioType = this.channelOptions.find(i => i.value === val).children[0].value
        this.getPlatform({
          audioType: this.dialogForm.audioType,
          joinType: 3
        })
      }
    },
    async 'dialogForm.audioType'(val) {
      if (this.dialogVisible) {
        await this.getPlatform({
          audioType: val,
          joinType: 3
        })
        this.getRefrash()
      }
    }
  },
  mounted() {
    this.getDevices()
    this.getPlatform({})
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
    }
  },
  methods: {
    // 关联设备
    getDevices() {
      devices(2).then(res => {
        if (res.code === 0) {
          this.deviceOptions = res.data
          if (this.form.id) {
            this.getDetail()
          }
        }
      })
    },

    // 详情
    getDetail() {
      detail(this.form.id).then(res => {
        if (res.code === 0) {
          this.form = res.data
          this.form.deviceIds = res.data.deviceIds.split(',')
          this.deviceOptions.unshift.apply(this.deviceOptions, res.data.deviceList)
        }
      })
    },

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

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

    // 弹窗
    getDialog() {
      this.dialogForm.platformId = this.platformOptions[0].value
      this.dialogVisible = true
      this.getList()
    },

    // 音频列表
    getList() {
      list(this.dialogForm).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
          this.$refs.table.clearSelection()
          if (this.form.audioDefaultResp.length > 0) {
            this.form.audioDefaultResp.map(i => {
              let row = this.tableData.find(j => j.audioId === i.audioId)
              if (row) {
                this.$refs.table.toggleRowSelection(row, true)
              }
            })
          }
        }
      })
    },

    // 搜索
    getSearch() {
      this.dialogForm.pageNum = 1
      this.getList()
    },

    // 重置
    getRefrash() {
      this.dialogForm = {
        pageNum: 1,
        pageSize: 10,
        platformId: this.platformOptions[0].value,
        audioType: this.dialogForm.audioType,
        status: 1
      }
      this.getList()
    },

    getRowKey(row) {
      return row.audioId
    },

    // 表格多选
    getChange(row) {
      this.form.audioList = []
      if (row.length > 0) {
        row.map(i => {
          if (this.form.audioDefaultResp.findIndex(j => j.audioId === i.audioId) === -1) {
            this.form.audioDefaultResp.push(i)
          }
        })
      }
    },

    // 取消
    cancel() {
      this.$tab.closeOpenPage('/operation/waken')
    },

    // 提交
    getSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.deviceIds = this.form.deviceIds.join(',')
          this.form.audioList = []
          this.form.audioDefaultResp.map(i => {
            this.form.audioList.push({
              audioId: i.audioId,
              audioType: i.audioType
            })
          })
          submit(this.form).then(res => {
            if (res.code === 0) {
              this.$message.success('提交成功！')
              this.form.id ? this.getDevices() : this.cancel()
            }
          }).catch(err => {
            this.form.deviceIds = this.form.deviceIds.split(',')
          })
        } else {
          return false
        }
      })
    },

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

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

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