<template>
  <div>
    <manager-ui
      :loading="loading"
      :query-model="qureyParam"
      :query-items="queryItems"
      :static-data="staticData"
      :column-items="columnItems"
      :table-data="tableData"
      :pagination="page"
      :showDownloadBtn="false"
      show-table-tools
      @create="openDialog('add')"
      @selection-change="handleSelectionChange"
      @searchClick="searchClick"
      @search="search"
      @resetForm="reset"
    >
      <template slot="scriptStatus" slot-scope="scope">
        <span>{{ scope.scope.row.scriptStatus?'启用':'停用' }}</span>
      </template>
      <template slot="operaiton" slot-scope="scope">
        <el-context-menu :menus="menus" :scope="scope.scope" :default="3" @oper="clickRow" />
      </template>
      <template slot="tableTools">
        <el-button type="text" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
        <el-button type="text" icon="el-icon-sort" @click="handleBatchSwitch">开关</el-button>
      </template>
    </manager-ui>
    <Dialog
      :id="id"
      ref="dialog"
      :command="command"
      @success="search"
    />
  </div>
</template>
<script>
import table from '@ability/mixins/table'
import Dialog from './components/Dialog'
import { getLayoutList, removeLayout, switchLayout } from '../api'
export default {
  components: { Dialog },
  mixins: [table],
  data() {
    return {
      ids: [],
      loading: false,
      id: null,
      qureyParam: {
        scriptName: '',
        scriptStatus: null
      },
      queryItems: [
        {
          type: 'input',
          span: 12,
          key: 'scriptName',
          label: '剧本名称'
        },
        {
          type: 'select',
          span: 12,
          key: 'scriptStatus',
          label: '剧本状态',
          option: 'layoutTypeList',
          optionLabel: 'label',
          optionValue: 'value',
          clearable: true
        }
      ],
      columnItems: [
        {
          type: 'selection',
          width: 50
        },
        {
          _key: 'scriptName',
          prop: 'scriptName',
          label: '剧本名称'
        },
        {
          _key: 'scriptStatus',
          prop: 'scriptStatus',
          label: '剧本状态',
          render: true
        },
        {
          _key: 'scriptDesc',
          prop: 'scriptDesc',
          label: '描述'
        },
        {
          _key: 'createUser',
          prop: 'createUser',
          label: '创建人'
        },
        {
          _key: 'createTime',
          prop: 'createTime',
          label: '创建时间'
        },
        {
          _key: 'operaiton',
          prop: 'operaiton',
          label: '操作',
          render: true
        }
      ],
      tableData: [],
      command: '',
      row: null,
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'rightRuleManage_del'
        },
        {
          text: '修改',
          command: 'edit',
          icon: 'el-icon-edit'
          // ruleCode: 'rightRuleManage_update'
        },
        {
          text: '删除',
          command: 'delete',
          icon: 'el-icon-delete',
          iconColor: 'red'
          // ruleCode: 'rightRuleManage_del'
        },
        {
          text: '开关',
          command: 'switch',
          icon: 'el-icon-switch-button'
          // ruleCode: 'rightRuleManage_del'
        }
      ]
    }
  },
  computed: {
    staticData() {
      return {
        layoutTypeList: [
          { label: '启用', value: 1 },
          { label: '停用', value: 0 }
        ]
      }
    }
  },
  created() {
    this.search()
  },
  methods: {
    clickRow(command, scope) {
      if (command === 'edit') {
        this.openDialog('modify', scope.row)
      }
      if (command === 'delete') {
        this.handleDelete(scope.row)
      }
      if (command === 'detail') {
        this.openDialog('detail', scope.row)
      }
      if (command === 'switch') {
        this.ids = [scope.row.scriptId]
        this.handleSwitch('test', scope.row)
      }
    },
    handleBatchSwitch() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请至少选择一项')
        return
      }
      if (this.multipleSelection.some(el => this.multipleSelection[0].scriptStatus != el.scriptStatus)) {
        this.$message.warning('请选择剧本状态相同的行')
        return
      }
      this.ids = this.multipleSelection.map(el => el.scriptId)
      this.handleSwitch(null, this.multipleSelection[0])
    },
    handleSwitch(command, row) {
      switchLayout({
        scriptStatus: row.scriptStatus ? 0 : 1,
        scriptId: this.ids
      })
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.$message.success('操作成功')
            this.search()
          }
          this.loading = false
        })
    },
    openDialog(command, row) {
      this.command = command
      if (row) {
        this.id = row.scriptId
      }
      this.$refs.dialog.dialogVisible = true
    },
    handleDelete(row) {
      let id = []
      if (row.scriptId) {
        id = [row.scriptId]
      } else {
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请至少选择一项')
          return
        } else {
          id = this.multipleSelection.map((obj) => obj.scriptId)
        }
      }
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeLayout({
            id
          })
            .then((resp) => {
              if (resp.data.returnCode == '0') {
                this.$message.success('删除成功')
                this.search()
              }
            })
        })
    },
    searchClick() {
      this.page.current = 1
      this.search()
    },
    search() {
      this.loading = true
      getLayoutList(
        {
          scriplayoutInfoMap: this.qureyParam,
          page: this.page
        }
      )
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.tableData = resp.data.data.list
            const { current, size, total } = resp.data.data.page
            this.page.current = current
            this.page.size = size
            this.page.total = total
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.page.current = 1
      this.search()
    }
  }
}
</script>
