<template>
  <a-page-header-wrapper title="查询表格">
    <a-card :bordered="false">
      <div class="tableList">
        <div class="tableListForm">
          <a-form
            v-show="!expandForm"
            layout="inline"
            :model="query"
            :form="form"
          >
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用名称"
                  prop="app_name"
                  v-decorator="['app_name']"
                >
                  <a-input v-model="query.app_name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用类别"
                  prop="category"
                  v-decorator="['category']"
                >
                  <a-select
                    v-model="query.category"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <a-option
                      :value="item.value"
                      v-for="item in categoryList"
                      :key="item.value"
                      >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <span class="submitButtons">
                  <a-button
                    type="primary"
                    htmlType="submit"
                    @click="getApplicationList"
                  >
                    查询
                  </a-button>
                  <a-button :style="{ marginLeft: '8px' }" @click="resetForm">
                    重置
                  </a-button>
                  <a :style="{ marginLeft: '8px' }" @click="toggleForm">
                    展开 <a-icon type="down" />
                  </a>
                </span>
              </a-col>
            </a-row>
          </a-form>
          <a-form
            v-show="expandForm"
            layout="inline"
            :model="query"
            :form="form"
          >
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用名称"
                  prop="app_name"
                  v-decorator="['app_name']"
                >
                  <a-input v-model="query.app_name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用类别"
                  prop="category"
                  v-decorator="['category']"
                >
                  <a-select
                    v-model="query.category"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <a-option
                      :value="item.value"
                      v-for="item in categoryList"
                      :key="item.value"
                      >{{ item.label }}</a-option
                    >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用版本号"
                  prop="app_version"
                  v-decorator="['app_version']"
                >
                  <a-input v-model="query.app_version" placeholder="请输入" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="创建时间"
                  prop="create_at"
                  v-decorator="['create_at']"
                >
                  <a-range-picker
                    v-model="query.create_at"
                    style="width: 100%"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="应用尺寸"
                  prop="app_screen_size"
                  v-decorator="['app_screen_size']"
                >
                  <a-select v-model="query.app_screen_size">
                    <a-select-option
                      v-for="item in sizeList"
                      :key="item.value"
                      :value="item.label"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item
                  label="适配平台"
                  prop="app_arch"
                  v-decorator="['app_arch']"
                >
                  <a-select v-model="query.app_arch">
                    <a-select-option
                      v-for="item in portList"
                      :key="item.value"
                      :value="item.label"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <div style="overflow: hidden">
              <div :style="{ float: 'right', marginBottom: '24px' }">
                <a-button
                  type="primary"
                  htmlType="submit"
                  @click="getApplicationList"
                >
                  查询
                </a-button>
                <a-button :style="{ marginLeft: '8px' }" @click="resetForm">
                  重置
                </a-button>
                <a :style="{ marginLeft: '8px' }" @click="toggleForm">
                  收起 <a-icon type="up" />
                </a>
              </div>
            </div>
          </a-form>
        </div>
        <div class="tableListOperator">
          <a-button icon="plus" type="primary" @click="openForm">
            新建
          </a-button>
          <span v-show="selectedRowKeys.length > 0">
            <a-button> 批量操作 </a-button>
            <a-dropdown overlay="{menu}">
              <a-button> 更多操作 <icon type="down" /> </a-button>
            </a-dropdown>
          </span>
        </div>
        <!-- <StandardTable
          selectedRows="{selectedRows}"
          loading="{loading}"
          data="{data}"
          columns="{this.columns}"
          onSelectRow="{this.handleSelectRows}"
          onChange="{this.handleStandardTableChange}"
        /> -->
        <a-table
          :columns="columns"
          :rowKey="(record) => record.uuid"
          :dataSource="tableData.list"
          :pagination="tableData.pagination"
          :loading="loading"
          @change="handleTableChange"
        >
          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->
          <template slot="login" slot-scope="login">
            {{ login.app_name }}
          </template>
          <template slot="name" slot-scope="name">
            {{ name.first }} {{ name.last }}
          </template>
          <template slot="review" slot-scope="record">
            <a-tag :color="record == '上架' ? 'green' : 'red'">
              {{ record }}
            </a-tag>
          </template>
          <template
            slot="expandedRowRender"
            slot-scope="record"
            style="margin: 0"
          >
            <p :style="[sya, syb]">
              <a-avatar :src="record.app_icon" shape="square" :size="128" />
            </p>
            <p :style="[sya]">详细信息</p>
            <a-row>
              <a-col :span="6">
                <a-description-item
                  title="应用名称"
                  :content="record.app_name"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="应用版本"
                  :content="record.app_version"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="应用类别"
                  :content="record.category"
                />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="下载地址"
                  :content="record.download_url"
                />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-description-item title="启动页" :content="record.launcher" />
              </a-col>
              <a-col :span="6">
                <a-description-item
                  title="创建日期"
                  :content="record.create_at"
                />
              </a-col>
              <a-col :span="12">
                <a-description-item
                  title="应用描述"
                  :content="record.remarks"
                />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"> </a-col>
              <a-col :span="12"> </a-col>
            </a-row>
            <a-divider />
            <p :style="[sya]">应用元信息</p>
            <a-row>
              <a-col :span="24">
                <a-description-item title="JSON" :content="record.meta_data" />
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-description-item
                  title="Registered"
                  :content="record.date + ' (' + record.age + ')'"
                />
              </a-col>
            </a-row>
          </template>
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="handleEdit(record)">编辑应用</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="downloadFile(record)">下载EPK</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="rebuildApplication(record)"
              >重新打包</a
            >
            <a-divider type="vertical" />
            <a href="javascript:;" @click="handleEditSource(record)"
              >编辑源码</a
            >
            <a-divider type="vertical" />
            <a href="javascript:;" @click="updateReview(record, 1)">上架</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="updateReview(record, 0)">下架</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="updateLauncher(record)">设为启动器</a>
            <a-divider type="vertical" />
            <a href="javascript:;" @click="deleteApplication(record)">删除</a>
          </template>
        </a-table>
      </div>
    </a-card>
  </a-page-header-wrapper>
</template>

<script>
import {
  Avatar,
  Row,
  Col,
  Card,
  List,
  Button,
  Form,
  Icon,
  Table,
  Divider,
  Dropdown,
  Input,
  Tag,
  Select,
  DatePicker,
  message,
} from "ant-design-vue";
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import DescriptionItem from "@/components/DescriptionItem";
const columns = [
  {
    title: "应用名称",
    dataIndex: "app_name",
    width: "15%",
  },
  {
    title: "应用版本号",
    dataIndex: "app_version",
  },
  {
    title: "应用类别",
    dataIndex: "category_text",
  },
  {
    title: "应用状态",
    dataIndex: "app_review_text",
    scopedSlots: { customRender: "review" },
  },
  {
    title: "文件大小",
    dataIndex: "app_file_size",
  },
  {
    title: "应用尺寸",
    dataIndex: "app_screen_size",
  },
  {
    title: "适用平台",
    dataIndex: "app_arch",
  },
  {
    title: "Action",
    key: "action",
    width: "35%",
    scopedSlots: { customRender: "action" },
  },
];
// import { mapGetters } from "vuex";
import {
  getApplicationList,
  rebuildApplication,
  deleteApplication,
  updateReview,
  updateLauncher
} from "@/api/openapi";

import { mapTrim, download } from "@/utils/index";

export default {
  name: "ApplicationIndex",
  data: () => ({
    expandForm: false,
    selectedRowKeys: [],
    columns,
    sya: {
      fontSize: "16px",
      color: "rgba(0,0,0,0.85)",
      lineHeight: "24px",
      display: "block",
      marginBottom: "16px",
    },
    syb: {
      marginBottom: "24px",
    },
    query: {
      app_name: null,
      category: null,
      app_version: null,
      app_screen_size: null,
      app_arch: null,
      create_at: null,
    },
    categoryList: [
      { label: "影音视听", value: 1 },
      { label: "实用工具", value: 2 },
      { label: "图书阅读", value: 3 },
      { label: "学习教育", value: 4 },
      { label: "医疗健康", value: 5 },
      { label: "未定义", value: 6 },
    ],
    sizeList: [
      { label: "240 * 240", value: 1 },
      { label: "390 * 390", value: 2 },
      { label: "450 * 450", value: 3 },
    ],
    portList: [
      { label: "ASR3601", value: 1 },
      { label: "ASR3603", value: 2 },
    ],
    loading: false,
    post: {
      page: 1,
      pageSize: 15,
    },
    tableData: {
      list: [],
      pagination: {
        pageSize: 15,
        total: 200,
      },
    },
  }),
  components: {
    Icon,
    APageHeaderWrapper: PageHeaderWrapper,
    AAvatar: Avatar,
    ARow: Row,
    ACol: Col,
    ACard: Card,
    ATag: Tag,
    ACardGrid: Card.Grid,
    ACardMeta: Card.Meta,
    AList: List,
    AButton: Button,
    AForm: Form,
    AFormItem: Form.Item,
    AIcon: Icon,
    ATable: Table,
    ADescriptionItem: DescriptionItem,
    ADivider: Divider,
    ADropdown: Dropdown,
    AInput: Input,
    ASelect: Select,
    AOption: Select.Option,
    ASelectOption: Select.Option,
    ARangePicker: DatePicker.RangePicker,
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, {});
  },
  methods: {
    handleEdit(record) {
      this.$router.push({ name: "ApplicationForm", params: { title: "编辑", record: record } })
    },
    handleEditSource(record) {
      this.$router.push({ name: "FileManager", params: { directory: record.file_dir, disk: "epks" } })
    },
    updateReview(record, value) {
      // 上架1 下架0
      updateReview({ app: record.uuid, review: value }).then(res => {
        message.success(res.msg)
        this.getApplicationList()
      }).catch(err => {
        message.error(err.msg)
      })
    },
    updateLauncher(record) {
      updateLauncher({ app: record.uuid }).then(res => {
        message.success(res.msg)
      }).catch(err => {
        message.error(err.msg)
      })
    },
    downloadFile(record) {
      console.log(record)
      download(`${record.app_name}.epk`, record.download_url);
    },
    resetForm() {
      this.$nextTick(() => {
        this.form.resetFields();
      });
    },
    toggleForm() {
      this.expandForm = !this.expandForm;
    },
    onSelectChange(selectedRowKeys) {
      window.console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    openForm() {
      this.$router.push({ path: "/application/form" });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter);
      this.post.page = pagination.current;
      this.post.pageSize = pagination.pageSize;
      this.getApplicationList();
    },
    getApplicationList() {
      this.loading = true;
      let opts = mapTrim(this.query);
      opts = Object.assign(opts, this.post);

      getApplicationList(opts)
        .then((res) => {
          if (res.code == 200) {
            this.tableData.list = res.data.map((item) => {
              const cat = this.categoryList.find(
                (i) => item.category == i.value
              );
              if (cat) item.category_text = cat.label;
              item.app_review_text = item.app_review ? "上架" : "下架";
              return item;
            });
            this.tableData.pagination.pageSize = res.pageSize;
            this.tableData.pagination.total = res.total;
          }
          message.success(res.msg);
        })
        .catch((err) => {
          console.log(err);
          message.error(err.msg);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    rebuildApplication(record) {
      rebuildApplication(record.uuid)
        .then((res) => {
          message.success(res.msg);
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
    deleteApplication(record) {
      deleteApplication(record.uuid)
        .then((res) => {
          message.success(res.msg)
          this.getApplicationList()
        })
        .catch((err) => {
          message.error(err.msg);
        });
    },
  },
  mounted() {},
  created() {
    this.getApplicationList();
  },
};
</script>
<style lang="less">
@import url("styles/tableList.less");
</style>
