<template>
  <div class="hello">
    <p class="tips">{{$t('copy_item_tips1')}}</p>
    <el-form status-icon label-width="100px" class="infoForm" v-model="infoForm">
      <el-form-item label class="text-left">
        <el-select
          style="width:100%;"
          v-model="copy_item_id"
          :placeholder="$t('please_choose')"
          @change="choose_copy_item"
        >
          <el-option
            v-for="item in itemList"
            :key="item.item_id"
            :label="item.item_name"
            :value="item.item_id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-tooltip class="item" effect="dark" :content="$t('copy_item_tips2')" placement="right">
          <el-input
            type="text"
            auto-complete="off"
            v-model="item_name"
            :placeholder="$t('copy_item_tips2')"
          ></el-input>
        </el-tooltip>
      </el-form-item>

      <el-form-item label>
        <el-button type="primary" style="width:100%;" @click="FormSubmit">{{$t('submit')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      infoForm: {},
      isOpenItem: true,
      itemList: {},
      copy_item_id: '',
      item_name: '',
      item_description: ''
    }
  },
  methods: {
    get_item_list() {
      var that = this
      var url = DocConfig.server + '/api/item/myList'

      var params = new URLSearchParams()

      that.axios.get(url, params).then(function(response) {
        if (response.data.error_code === 0) {
          // that.$message.success("加载成功");
          var json = response.data.data
          that.itemList = json
        } else {
          that.$alert(response.data.error_message)
        }
      })
    },
    choose_copy_item(item_id) {
      for (var i = 0; i < this.itemList.length; i++) {
        if (item_id == this.itemList[i].item_id) {
          this.item_name = this.itemList[i].item_name + '--copy'
          this.item_description = this.itemList[i].item_description
        }
      }
    },
    FormSubmit() {
      var that = this
      var url = DocConfig.server + '/api/item/add'
      if (!this.isOpenItem && !this.infoForm.password) {
        that.$alert(that.$t('private_item_passwrod'))
        return false
      }
      if (this.isOpenItem) {
        this.infoForm.password = ''
      }
      var params = new URLSearchParams()
      params.append('copy_item_id', this.copy_item_id)
      params.append('item_name', this.item_name)
      params.append('item_description', this.item_description)

      that.axios.post(url, params).then(function(response) {
        if (response.data.error_code === 0) {
          that.$router.push({ path: '/item/index' })
        } else {
          that.$alert(response.data.error_message)
        }
      })
    }
  },

  mounted() {
    this.get_item_list()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.center-card a {
  font-size: 12px;
}

.infoForm {
  width: 400px;
  margin-top: 50px;
}

.goback-btn {
  z-index: 999;
  margin-left: 500px;
}

.tips {
  margin-left: 10px;
  color: #9ea1a6;
}
</style>
