<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card">
    <el-toolbar>
      <el-col :span="14">
        <el-button @click="addSiteStyleClickHandler" priv="SiteStyleManage.AddStyle">
          <i class="fa fa-plus"></i>新建
        </el-button>
      </el-col>
      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="styleList.searchContent" placeholder="请输入名称或别名" class="search-bar-algin-toolbar"
          @keyup.enter.native="searchClickHandler"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
      </el-col>
    </el-toolbar>

    <el-list-view ref="siteStyleList" :data="styleList.siteStyleList" :data-read-url="getSiteStylesListURL" :pageSize="10"
      @selection-change="onSelectionChange">
      <template slot-scope="row">
        <div class="panel-card">
          <el-row> <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row)">{{row.name}}</a>
            <span class="gray">别名：{{row.code}}</span> </el-row>
          <el-row class="list-card-buttons">
            <el-col :span="6">
              <el-tag v-if="row.isUsing=='Y'" size="small">启用</el-tag>
              <el-tag v-else size="small" type="danger">停用</el-tag>
            </el-col>
            <el-col :span="6"><span>路径：</span> <em>{{row.path || '无'}}</em> </el-col>
            <el-col :span="12" class="tar">
              <el-button @click.stop="deleteSiteStyleClickHandler([row])" type="text" title="删除" priv="SiteStyleManage.DeleteStyle">
                <i class="fa fa-times"></i>删除
              </el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-list-view>

  </div>
</template>

<script>
import util from '@src/common/util.js'
import PathPicker from '../contentcore/components/PathPicker.vue'

export default {
  filters: {
    fixDateTime: function (val) {
      return util.formatDate(val, 'yyyy-MM-dd HH:mm')
    }
  },

  data() {
    return {
      createSiteStyleModal: false,
      nodeID: 0,
      addOrEditStyleNodeModal: false,
      // 站点风格
      styleList: {
        searchContent: '', // 检索关键词
        selectedRows: [], // 选择的记录数
        siteStyleList: [] // 站点风格列表
      },
      detailDataChange: false
    }
  },

  methods: {
    gotoDetailPage(row) {
      this.currentSiteStyle = row
      this.$router.push({ path: `${this.$route.path}/${row.ID}` })
    },
    // 站点风格单击选中行
    onSelectionChange(selection) {
      this.styleList.selectedRows = selection
    },

    // 获取站点风格结点列表
    getStyleNodesList() {
      this.$refs.siteNodeTable.getData()
    },

    // 未启用的行设置文字颜色为灰色
    siteStyleTableShow(row, index) {
      if (row.isUsing === 'N') {
        return 'row-color-gray'
      }
      return ''
    },
    // 单击新建站点风格按钮
    addSiteStyleClickHandler() {
      let path = `${this.$route.path}/new`.replace(/\/\//g, '/')
      this.$router.push(path)
    },
    // 站点风格：单击删除按钮
    async deleteSiteStyleClickHandler(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录！', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return
      }
      let rowIds = []
      rows.forEach(function (row) {
        rowIds.push(row.ID)
      })
      if (!rowIds) {
        return
      }
      let strIds = rowIds.join(',')
      let data = await axios.delete(`/ui/sitestyles/${strIds}`)
      util.showResponseMessage(data.data)
      if (data.data.status === 1) {
        this.$refs.siteStyleList && this.$refs.siteStyleList.getData()
      }
    },

    searchClickHandler() {
      this.$refs.siteStyleList && this.$refs.siteStyleList.getData()
      this.detailDataChange = false
    },

    // 站点风格列表数据URL
    getSiteStylesListURL() {
      return [
        '/ui/sitestyles',
        {
          params: {
            searchContent: encodeURIComponent(this.styleList.searchContent.trim()),
            pageIndex: this.styleList.pageIndex - 1,
            pageSize: this.styleList.pageSize
          }
        }
      ]
    }
  },
  props: ['imagePlayerID', 'catalogID', 'ID', 'imgPlayerType', 'show'],
  components: {
    'path-picker': PathPicker
  }
}
</script>

<style scoped>
  .info-form-wrap {
    padding: 22px 10px 0px;
    max-width: 450px;
    margin: 0 auto;
  }

  .el-table__row.row-color-gray {
    color: gray;
  }
</style>
