<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams">
      <el-form-item :label="$t('area.areaName')">
        <el-input
          v-model="queryParams.user"
          :placeholder="$t('share.PleaseEnter') + $t('area.areaName')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('area.regionCode')">
        <el-input
          v-model="queryParams.user"
          :placeholder="$t('share.PleaseEnter') + $t('area.regionCode')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('area.areaType')">
        <el-select
          v-model="queryParams.region"
          :placeholder="$t('share.PleaseChoose') + $t('area.areaType')"
        >
          <!-- <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini">{{
          $t("share.search")
        }}</el-button>
        <el-button icon="el-icon-refresh" size="mini">{{
          $t("share.reset")
        }}</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          plain
          size="mini"
          @click="add"
          >{{ $t("share.new") }}</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-sort" plain size="mini">{{
          $t("area.UnfoldAndFold")
        }}</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini">{{
          $t("share.export")
        }}</el-button>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" :label="$t('area.areaName')">
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('area.regionCode')"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="address" :label="$t('area.sort')" align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('area.areaType')"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('share.CreationTime')"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('share.operate')"
        width="180"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >{{ $t("share.edit") }}</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleAdd(scope.$index, scope.row)"
            >{{ $t("share.new") }}</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            >{{ $t("share.delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-row :gutter="10">
        <el-form
          :model="dialogForm"
          label-width="130px"
          :rules="rules"
          ref="ruleForm"
        >
          <el-col :span="12">
            <el-form-item
              :label="$t('area.SuperiorRegion')"
              prop="SuperiorRegion"
            >
              <el-select
                v-model="dialogForm.SuperiorRegion"
                :placeholder="
                  $t('share.PleaseChoose') + $t('area.SuperiorRegion')
                "
                style="width: 100%"
              >
                <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('area.areaType')" style="width: 100%">
              <el-select
                v-model="dialogForm.areaType"
                :placeholder="$t('share.PleaseChoose') + $t('area.areaType')"
                style="width: 100%"
              >
                <!-- <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('area.areaName')" prop="areaName">
              <el-input
                v-model="dialogForm.areaName"
                :placeholder="$t('share.PleaseEnter') + $t('area.areaName')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('area.regionCode')">
              <el-input
                :placeholder="$t('share.PleaseEnter') + $t('area.regionCode')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('area.sort')" prop="sort">
              <el-input-number
                v-model="dialogForm.sort"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('share.cancel')}}</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >{{$t('share.confirm')}}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {},
      tableData: [{}],
      dialogVisible: false,
      title: this.$t("area.AddArea"),
      dialogForm: {
        // num: 0,
      },
      rules: {
        SuperiorRegion: [
          {
            required: true,
            message:
              this.$t("share.PleaseChoose") + this.$t("area.SuperiorRegion"),
            trigger: "change",
          },
        ],
        areaName: [
          {
            required: true,
            message:
              this.$t("share.PleaseEnter") + this.$t("area.areaName"),
            trigger: "blur",
          },
        ],
        sort:[
        {
            required: true,
            message:
              this.$t("share.PleaseChoose") + this.$t("area.sort"),
            trigger: "change",
          }
        ]
      },
    };
  },
  methods: {
    add() {
      this.dialogVisible = true;
      this.title = this.$t("area.AddArea");
    },
    handleEdit(){
      this.dialogVisible = true;
      this.title = this.$t("area.EditArea");
    },
    handleAdd() {
      this.dialogVisible = true;
      this.title = this.$t("area.AddArea");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-input-number {
  width: 100%;
}
</style>
