<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button icon="el-icon-plus" size="small" plain type="primary" @click="dialogAdd=true">添加语音</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="sData" border>
      <el-table-column label="渠道名称" prop="ChannelName" />
      <el-table-column label="渠道口岸" prop="Port" />
      <el-table-column label="提示语音" prop="Text" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="edit(scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑语音" :visible.sync="dialogEdit">
      <el-form :model="editRow" label-width="80px">
        <el-form-item label="渠道">
          <el-select v-model="editRow.ChannelId" placeholder="请选择" clearable disabled>
            <el-option
              v-for="item in Channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="口岸名称">
          <el-input v-model="editRow.Port" min="0" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="语音文本">
          <el-input v-model="editRow.Text" min="0" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEdit = false">取 消</el-button>
        <el-button type="primary" @click="postEdit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加语音" :visible.sync="dialogAdd">
      <el-form :model="createRow" label-width="80px">
        <el-form-item label="渠道">
          <el-select v-model="createRow.ChannelId" placeholder="请选择" clearable filterable>
            <el-option
              v-for="item in Channels"
              :key="item.Id"
              :label="item.Name"
              :value="item.Id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="口岸名称">
          <el-input v-model="createRow.Port" min="0" autocomplete="off" />
        </el-form-item>
        <el-form-item label="语音文本">
          <el-input v-model="createRow.Text" min="0" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAdd = false">取 消</el-button>
        <el-button type="primary" @click="postAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { _getMedios, _addMedio, _editMedio } from '@/api/channelMedios.js'
import { _getDeliverChannel } from '@/api/baseInfo'

export default {
  name: 'Medios',
  data() {
    return {
      sData: [],
      editRow: {
        Id: 0,
        ChannelName: '',
        Port: '',
        Text: ''
      },
      createRow: {
        ChannelName: '',
        Port: '',
        Text: ''
      },
      dialogEdit: false,
      dialogAdd: false,
      Channels: []
    }
  },
  created() {
    _getDeliverChannel().then(response => {
      this.Channels = response
    })
    this.getMeidos()
  },
  methods:
  {
    getMeidos() {
      _getMedios().then(response => {
        this.sData = response
      })
    },
    edit(row) {
      this.editRow = row
      this.dialogEdit = true
    },
    postEdit() {
      _editMedio(this.editRow).then(response => {
        this.getMeidos()
        this.dialogEdit = false
      })
    },
    postAdd() {
      _addMedio(this.createRow).then(response => {
        this.getMeidos()
        this.dialogAdd = false
      })
    }
  }
}
</script>
