<template>
  <div class="config-container">
    <el-row :gutter="20">
      <el-col :lg="9" :md="9" :sm="24" :xl="9" :xs="24">
        <ms-card shadow="hover">
          <ms-form-table
            drag
            :form="form"
            :height="height"
            :rowTemplate="rowTemplate"
            style="width: 100%"
            @row-click="rowClick"
          >
            <el-table-column align="center" label="分类名称" prop="cat_name">
              <template #default="{ row }">
                <el-input v-model="row.cat_name" />
              </template>
            </el-table-column>
          </ms-form-table>
        </ms-card>
      </el-col>

      <el-col :lg="15" :md="15" :sm="24" :xl="15" :xs="24">
        <ms-card shadow="hover">
          <ms-form-table
            drag
            :form="formItem"
            :height="height"
            :row-template="rowTemplateItem"
            style="width: 100%"
          >
            <el-table-column align="center" label="标题" prop="title">
              <template #default="{ row }">
                <el-input v-model="row.title" />
              </template>
            </el-table-column>
            <el-table-column align="center" label="链接" prop="link">
              <template #default="{ row }">
                <el-input v-model="row.link" />
              </template>
            </el-table-column>
          </ms-form-table>
        </ms-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" span="20">
      <span style="padding: 0 280px" />
      <el-button style="margin: auto" type="primary" @click="save">
        保存
      </el-button>
    </el-row>
  </div>
</template>

<script>
  //import { translateTitle as t } from '@/utils/i18n'
  import MsFormTable from './components/HelpEdit.vue'
  import MsCard from '@/components/MsCard/index.vue'
  import { getPcHelp, savePcHelp } from '@/api/base/help/config'
  import { isJson } from '@/utils/validate'

  export default {
    name: 'PcHelp',
    components: { MsFormTable, MsCard },
    // inject: ['$baseTableHeight', '$baseMessage'],
    data() {
      return {
        typeRef: null,
        baseRef: null,
        height: this.$baseTableHeight(),
        rowTemplate: {
          cat_name: '',
          switch: true,
          items: [],
        },
        form: [
          {
            cat_name: '帮助',
            switch: true,
            items: [{ id: 1001, title: '帮助', link: '', switch: true }],
          },
          {
            cat_name: '帮助',
            items: [{ id: 1001, title: '帮助', link: '', switch: true }],
          },
        ],
        rowTemplateItem: {
          id: '',
          title: '',
          link: '',
          switch: true,
        },
        formItem: [{ id: 1001, title: '帮助', link: '', switch: true }],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
      }
    },
    created() {
      this.listPageHelp()
    },
    methods: {
      async listPageHelp() {
        this.listLoading = true
        const { data } = await getPcHelp()
        if (isJson(data.page_pc_help)) {
          this.form = JSON.parse(data.page_pc_help)
        } else {
          this.form = [{ items: [] }]
        }
        this.formItem = this.form[0].items
        this.listLoading = false
      },
      async save() {
        const params = JSON.stringify(this.form)
        const { msg, status } = await savePcHelp({ pc_help: params })
        if (200 === status) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
      },
      rowClick(row) {
        console.log('============this.form===========')
        console.log(this.form)
        this.formItem = this.form[row.index].items
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.config';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    :deep(.el-table) {
      margin-top: 0;

      .el-button.is-text {
        width: 40px;
      }
    }
  }
</style>
